CSS雖然很有趣，入門也容易，但對于前端菜鳥、初學者來說，還是有一些小坑是無法避免的，這些小坑相對而言更需要去積累和理解，也是比較容易忽略的一些問題，以至于學到后來，因為沒有搞定這些小坑而延伸出許多“大坑”，相當影響學習效率。

一、CSS選擇器

CSS中的選擇器大體分為五大類：

• 基本選擇器
• 關(guān)系選擇器
• 偽類選擇器
• 偽元素選擇器
• 屬性選擇器

這五大類里每一類又分別有很多類型的選擇器，可以說是一個龐大的“選擇器”家族。然而，在實際使用過程當中，用的最多的其實也就那么幾種而已，比如標簽選擇器，類選擇器，ID選擇器等。那么，我們在需要使用選擇器的時候，優(yōu)先考慮的究竟是什么呢？這時候有的同學肯定會疑惑，難道不是哪個更方便就用哪個嗎？

其實不然。我們從零學習前端開發(fā)，最終的目標實際上是做一個合格的開發(fā)者，所以優(yōu)先考慮的肯定是“合格”二字。所以，在使用選擇器的時候，我們要考慮選擇器優(yōu)化這個概念。

對于瀏覽器來說，解析每種選擇器所耗費的時間并不一樣，那么如何才能寫出最優(yōu)選擇器呢？

(引用內(nèi)容來源于IMWeb的技術(shù)文章)

根據(jù)網(wǎng)站效率專家Steve Souders指出，各種CSS選擇器的效率由高到低排序如下：

• id選擇器
• 類選擇器
• 標簽選擇器
• 相鄰選擇器
• 子選擇器
• 后代選擇器
• 通配符選擇器
• 屬性選擇器
• 偽類選擇器

假如現(xiàn)在需要對一個p元素來使用選擇器：

<p id="text" class="red">這是一個段落<p>

我們可以通過很多方法選中它，標簽選擇器，類選擇器，id選擇器都能做到，但按照執(zhí)行效率來說，id選擇器是最佳的，其次是類選擇器，然后是元素選擇，最后才是屬性選擇器。

這里有一個小例子，作為一個前端新手，我剛開始練習CSS的時候，習慣在例子中使用了通用選擇器“*”來清除margin和padding：

*{margin: 0; padding: 0;}

直到后來，看到別人清除瀏覽器默認樣式的時候都寫一大長串，甚至引入一個專門的CSS文件來用于清除默認樣式，我十分不解，用通用選擇器豈不是更方便？

后來才明白，這樣做反而是最沒有效率的！原因在于瀏覽器匹配文檔中所有的元素后會分別向上逐級匹配，一直到文檔的根節(jié)點才作罷，這樣匹配的開銷是非常大的。所以，應(yīng)當避免使用通用選擇器。

還有一個問題很關(guān)鍵：瀏覽器又是如何識別你寫的選擇器的呢？

實際上，瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。也就是說，順序是從右到左。

所以當你給一個元素寫了相當多的選擇器，瀏覽器會從右到左來尋找，顯然路徑鏈會影響效率。因此，建議選擇器的層級最多不要超過四層。

綜上所述，在使用選擇器的時候，其實要做一個綜合考慮，每一次都用最優(yōu)解來使用，這樣才能提高代碼的效率。

二、CSS優(yōu)先級

CSS中的優(yōu)先級大概如下：

！important > style > id選擇器 > 類選擇器 > 元素選擇器 > "" > 瀏覽器默認 > 繼承*

這樣的優(yōu)先級比較方式比較籠統(tǒng)，所以還有一種比較普遍的簡化方式：

我們把每一個選擇器都用一個數(shù)字（權(quán)重值）來表示，元素選擇器用個位數(shù)，類選擇器用十位數(shù)，id選擇器用百位數(shù)。

于是，權(quán)重的計算我們可以總結(jié)如下圖所示：

其中，沒選中代表的就是繼承來的屬性。

知道了選擇器的優(yōu)先級，那么元素最終的樣式究竟是如何得出的呢？

我們知道，一個元素的樣式來源有：

• 繼承自父級元素的樣式
• 瀏覽器的默認樣式
• 元素自己聲明的樣式

最終應(yīng)用的樣式就是通過一系列復雜的計算體系而得到的。而這里面有幾個值需要注意。

應(yīng)用值（used value）、初始值（initial value）、（inherit value）

最終應(yīng)用的樣式稱之為應(yīng)用值，如果一個元素聲明了樣式，那么應(yīng)用值就是這個聲明的樣式，但如果沒有聲明，那應(yīng)用值又是什么？

這里還包括了兩個特殊的值：繼承值和初始值。

一個屬性默認是繼承的，我們得到的它的父元素的同屬性的應(yīng)用值就叫做繼承值。如果屬性是默認不繼承的，那么就會有一個初始值，這個初始值實際上就是一個默認的值，比如width的初始值是auto。

三、CSS重置

有關(guān)CSS重置之前已經(jīng)提到過，就是清除瀏覽器默認樣式。

對于不同的瀏覽器，其默認樣式都是不一樣的，而且默認樣式有時候?qū)嶋H上就如同畫蛇添足一般，清除是非常必要的。

CSS重置分為兩種，一種是糾正重置，一種是清零重置

糾正重置，就如字面意思，因為瀏覽器默認樣式有差異的緣故，我們需要來消除這些差異，讓頁面在不同的瀏覽器中看起來一致。開源的normalize.css就可以做到這一點，這里不再贅述。

清零重置，就是徹底的去除默認樣式，這個可以根據(jù)自己的需求來寫，也可以參考一些文檔，例如：Eric Meyer's Reset CSS 2.0

我的個人Blog：chronosblog.top
我的微信公眾號：runtustory