本篇文章給大家?guī)?lái)了css中預(yù)處理器、后處理器和選擇器的相關(guān)知識(shí)，希望對(duì)大家有幫助。

css預(yù)處理器

css預(yù)處理器：用一種專(zhuān)門(mén)的編程語(yǔ)言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開(kāi)發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作。

css存在的問(wèn)題：

• 語(yǔ)法不夠強(qiáng)大，比如無(wú)法嵌套書(shū)寫(xiě)導(dǎo)致模塊化開(kāi)發(fā)中需要書(shū)寫(xiě)很多重復(fù)的選擇器；

• 沒(méi)有變量和合理的樣式復(fù)用機(jī)制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，導(dǎo)致難以維護(hù)。

• 所以需要預(yù)處理器提供 CSS 缺失的樣式層復(fù)用機(jī)制、減少冗余代碼，提高樣式代碼的可維護(hù)性。

目前比較主流的三個(gè)處理器分別是 Less、Sass、Stylus

Sass、LESS和Stylus的對(duì)比

安裝
1.sass的安裝

首先安裝ruby,建議安裝到C盤(pán)中，安裝過(guò)程中選擇“Add Ruby executables to your PATH”

ruby安裝成功后，啟動(dòng)Ruby的Command控制面板，輸入命令

  gem install sass

回車(chē)后會(huì)自動(dòng)安裝好Sass

2.Less的安裝

分為兩種：客戶(hù)端和服務(wù)器端安裝。

a.客戶(hù)端

只需要在官網(wǎng)載一個(gè)Javascript腳本文件主“l(fā)ess.js”，然后在我們需要引入LESS源文件的HTML的中加入如下代碼：

<link rel="stylesheet/less" type="text/css" href="文件路徑/styles.less"> <script src="文件路徑/less.js" type="text/javascript"></script>

b.服務(wù)器

利用node的包管理器（npm）安裝LESS，安裝成功后就可以在Node環(huán)境中對(duì)LESS文件進(jìn)行編譯。

首先安裝node,安裝成功后，啟動(dòng)node的Command控制面板，輸入命令

  $ npm install less

回車(chē)后會(huì)自動(dòng)安裝好less

3.Stylus的安裝

Stylus的安裝和LESS在服務(wù)器端的安裝很相似，先安裝Node 。在Node的Command控制面板輸入命令：

 $ npm install stylus

回車(chē)后會(huì)自動(dòng)安裝好stylus

Sass、LESS和Stylus轉(zhuǎn)換成css文件

1.sass

先在項(xiàng)目中創(chuàng)建一個(gè)Sass文件，此例中將其命名為“style.scss”，并且將其放在對(duì)應(yīng)的項(xiàng)目樣式中

啟動(dòng)Ruby的Command控制面板，找到需要轉(zhuǎn)譯的Sass文件

在對(duì)應(yīng)的目錄下輸入下面的命令：

sass style.scss style.css sass --watch style.scss:style.css

就會(huì)生成自動(dòng)“style.css”文件，并自動(dòng)更新對(duì)應(yīng)的CSS樣式文件

2.Less（了解）

在安裝的Node JS環(huán)境下通過(guò)其自己的命令來(lái)進(jìn)行轉(zhuǎn)譯。

 $ lessc style.less

上面的命令會(huì)將編譯的CSS傳遞給stdout，你可以將它保存到一個(gè)文件中：

$ lessc style.less > style.css

3.Stylus(了解)

Stylus具有可執(zhí)行性，因此Stylus能將自身轉(zhuǎn)換成CSS。Stylus可以讀取自“stdin”輸出到“stdout”，因此Stylus可以像下面轉(zhuǎn)譯源文件：

$ stylus –compress  <some.styl> some.css

Stylus也像Sass一樣，同時(shí)接受單個(gè)文件和整個(gè)目錄的轉(zhuǎn)譯。例如，一個(gè)目錄名為“css”將在同一個(gè)目錄編譯并輸出“.css”文件。

$ stylus css

下面的命令將輸出到“./public/stylesheets”：

 $ stylus css –out public/stylesheets

還可以同時(shí)轉(zhuǎn)譯多個(gè)文件：

$ stylus one.styl two.styl

如果你的瀏覽器安裝了Firebug，那么可以使用FireStylus擴(kuò)展。

$ stylus –firebug <path>

變量的處理

Less：變量處理方式–懶加載，所有 Less 變量的計(jì)算，都是以這個(gè)變量最后一次被定義的值為準(zhǔn)。

Less

@size: 10px;.box { width: @size; } @size: 20px;  .ball { width: @size; }

輸出：

.box { width: 20px; } .ball { width: 20px; }

Stylus

size = 10px .box   width: sizesize = 20px .ball   width: size

輸出：

.box {  width: 10px;}.ball {  width: 20px;}

Sass的變量處理方式和Stylus相同，變量值輸出時(shí)根據(jù)之前最近的一次定義計(jì)算。這其實(shí)代表了兩種理念：Less 更傾向接近 CSS 的聲明式，計(jì)算過(guò)程弱化調(diào)用時(shí)機(jī)；而 Sass 和 Stylus 更傾向于指令式。

如果在Less中引入第三方樣式庫(kù)，可以通過(guò)重新配置變量來(lái)改變樣式

優(yōu)點(diǎn)：stylus和sass這樣的處理會(huì)不容易受多個(gè)第三方庫(kù)變量名沖突的影響，因?yàn)橐粋€(gè)變量不能影響在定義它以前的輸出樣式

css后處理器

參考鏈接

css后處理器是對(duì)css進(jìn)行處理，并最終生成css預(yù)處理器，它屬于廣義上的css預(yù)處理器

舉例：css壓縮工具（clean-css）,Autoprefixer(以Can I Use上的瀏覽器支持?jǐn)?shù)據(jù)為基礎(chǔ)，自動(dòng)處理兼容問(wèn)題)

Autoprefixer:

標(biāo)準(zhǔn)css:

.container {display: flex;}.item {flex: 1;}

兼容處理后

.container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .item { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }

優(yōu)點(diǎn)：使用Css語(yǔ)法，容易進(jìn)行模塊化，貼近Css的未來(lái)標(biāo)準(zhǔn)

缺點(diǎn)：邏輯處理能力有限

框架舉例

PostCss:是一個(gè)基于JS插件的轉(zhuǎn)換樣式的工具。PostCSS插件可以像預(yù)處理器，它們可以?xún)?yōu)化和Autoprefix代碼；可以添加未來(lái)語(yǔ)法；可以添加變量和邏輯；可以提供完整的網(wǎng)格系統(tǒng)；可以提供編碼的快捷方式等等

優(yōu)點(diǎn)：

• 多樣化的功能插件，創(chuàng)建了一個(gè)生態(tài)的插件系統(tǒng)
• 根據(jù)你需要的特性進(jìn)行模塊化
• 快速編譯
• 創(chuàng)建自己的插件，且具可訪問(wèn)性
• 可以像普通的CSS一樣使用它
• 不依賴(lài)于任何預(yù)處理器就具備創(chuàng)建一個(gè)庫(kù)的能力
• 可以與許多流行工具構(gòu)建無(wú)縫部署

font-family

font-family用來(lái)規(guī)定元素的字體系列。

font-family 可以把多個(gè)字體名稱(chēng)作為一個(gè)“回退”系統(tǒng)來(lái)保存。如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)。也就是說(shuō)，font-family 屬性的值是用于某個(gè)元素的字體族名稱(chēng)或/及類(lèi)族名稱(chēng)的一個(gè)優(yōu)先表。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值。

font-family 定義的原則：

• 通常會(huì)先進(jìn)行英文字體的聲明，選擇最優(yōu)的英文字體，這樣不會(huì)影響到中文字體的選擇，中文字體聲明則緊隨其次。
• 兼顧多操作系統(tǒng)，不同系統(tǒng)下的字體表示：

• 當(dāng)使用一些非常新的字體時(shí)，要考慮向下兼容，兼顧到一些極舊的操作系統(tǒng)，可以使用字體族系列 serif 和sans-serif 結(jié)尾。為低級(jí)系統(tǒng)提供fallback方案

css選擇器

參考鏈接

選擇器

分類(lèi)：基礎(chǔ)選擇器、組合選擇器、屬性選擇器、偽類(lèi)選擇器和偽元素等

基礎(chǔ)選擇器：

id選擇器（#footer），匹配所有id屬性等于footer的元素。 類(lèi)選擇器（.info），匹配所有class屬性中包含info的元素。 通用選擇器（*），匹配任何元素。 標(biāo)簽選擇器（E），匹配所有使用E標(biāo)簽的元素。 同級(jí)元素選擇器（E~F ），匹配任何在E元素之后的同級(jí)F元素(CSS3)。

屬性選擇器:(E表示元素，attr表示屬性，val表示屬性的值。)

 E[attr]選擇器,匹配所有具有attr屬性的E元素，不考慮它的值。  E[attr=val]匹配所有attr屬性值為val的E元素。  E[attr~=val]匹配具有attr屬性且屬性值用空格分隔的字符列表。  E[attr|=val]匹配具有attr屬性且屬性值為用連接符（-）分隔的字符串，并以val開(kāi)頭的E元素。  E[attr^="val"],屬性attr的值以"val"開(kāi)頭的元素（CSS3）。  E[attr$=“val”],屬性attr的值以"val"結(jié)尾的元素（CSS3）。  E[attr*="val"],屬性attr的值包含"val"字符串的元素（CSS3）。

組合選擇器

  多元素選擇器（E, F），同時(shí)匹配多有E元素或F元素。   后代選擇器（E F），匹配所有屬于E元素后代的F元素，E和F之間用空格分隔。   子元素選擇器（E > F）， 匹配所有E元素的子元素F。   相鄰選擇器（E + F），匹配所有緊隨E元素之后的同級(jí)元素F。

偽類(lèi)選擇器:

   E:link, 匹配所有未被點(diǎn)擊的鏈接.    E:visited, 匹配所有已被點(diǎn)擊的鏈接。    E:active, 匹配鼠標(biāo)已經(jīng)將其按下，還沒(méi)釋放的E元素。    E:hover, 匹配鼠標(biāo)懸停其上的E元素。    E:focus, 匹配獲得當(dāng)前焦點(diǎn)的E元素。

結(jié)構(gòu)性偽類(lèi)：E:nth-child(n), 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1。

！important屬性

1、用于解決IE對(duì)某些CSS規(guī)范有偏差的情況.
比如在IE中的效果總是和其他的瀏覽器如firefox,opera等相差2px,導(dǎo)致頁(yè)面布局有錯(cuò)位， 這是因?yàn)镮E對(duì)盒之間距離的解釋的bug造成的，針對(duì)這種情況我們就可以利用!important來(lái)幫助解決。

.myclass{ margin-left:20px!important; margin-left:40px;}

只有當(dāng)同時(shí)出現(xiàn)兩個(gè)同名的樣式時(shí)，才可以這樣用，此時(shí)IE瀏覽器是識(shí)別的
2、如果有定義了一個(gè)樣式A，比如font-size,你不打算讓以后也叫樣式A的覆蓋掉這個(gè)font-size,也可以用 !important . 而如果新樣式也用了!important 則還是會(huì)強(qiáng)制覆蓋掉

.A{ font-size:12px !important;}.A{ font-size:14px;   //不會(huì)生效 }.A{ font-size:14px !important; //生效 }

優(yōu)先級(jí)

！important >id選擇器>class、屬性、偽類(lèi)選擇器>標(biāo)簽選擇器

權(quán)值越大優(yōu)先級(jí)越高，權(quán)值相同，后定義的優(yōu)先級(jí)較高，

瀏覽器查找元素是從右到左查找的，好處是為了快速過(guò)濾掉一些無(wú)關(guān)緊要的樣式規(guī)則和元素

例如：p#pBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為pBox的p元素，如果都存在則匹配上。

屬性繼承

CSS屬性繼承：外層元素的樣式，會(huì)被內(nèi)層元素進(jìn)行繼承。多個(gè)外層元素的樣式，最終都會(huì)“疊加”到內(nèi)層元素上。

不可繼承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

CSS文本屬性都會(huì)被繼承的：
color、 font-size、font-family、font-style、 font-weight
text-align、text-decoration、text-indent、letter-spacing、line-height
提示：<body>中的CSS屬性，會(huì)被所有的子元素繼承。

優(yōu)先級(jí)就近原則，同權(quán)重的情況下樣式定義最近者為標(biāo)準(zhǔn)，載入樣式以最后載入的定位為準(zhǔn)

ID選擇器和Class選擇器的區(qū)別

ID選擇器：每個(gè)元素只能有一個(gè)ID，每個(gè)頁(yè)面只能有一個(gè)元素使用該ID

class選擇器：多個(gè)元素可以共用相同類(lèi)，一個(gè)元素可以有多個(gè)類(lèi)

雪碧圖原理

原理：把小圖標(biāo)合成一張大圖，通過(guò)給元素的公共css設(shè)置background-image為該合成圖，這樣每個(gè)元素都會(huì)以該合成圖為背景，而且頁(yè)面也只加載一張合成圖，然后再給每個(gè)元素單獨(dú)微調(diào)其background-position。把多個(gè)請(qǐng)求合并成一個(gè)。

background-position

設(shè)置背景圖像的起始位置。

background-position屬性設(shè)置背景原圖像（由 background-image 定義）的位置，意味著使用這個(gè)屬性的前提是必須設(shè)置背景原圖像background-image。

background-position的屬性值:

• 方向值：x軸方向：left | right | center; y軸方向：top| bottom | center
• 使用百分比來(lái)設(shè)置屬性值,以自身容器的長(zhǎng)寬 減去 圖片的長(zhǎng)寬 乘以 百分比 所得的數(shù)值來(lái)確定圖片的起始位置。
• 數(shù)值： X軸方向：x px ; Y軸方向：x px

（學(xué)習(xí)視頻分享：css視頻教程）