CSS雖然很有趣埂息，入門也容易琳轿，但對于前端菜鳥、初學(xué)者來說耿芹，還是有一些小坑是無法避免的，這些小坑相對而言更需要去積累和理解挪哄，也是比較容易忽略的一些問題吧秕，以至于學(xué)到后來，因為沒有搞定這些小坑而延伸出許多“大坑”迹炼，相當(dāng)影響學(xué)習(xí)效率砸彬。
一颠毙、CSS選擇器
CSS中的選擇器大體分為五大類：
- 基本選擇器
- 關(guān)系選擇器
- 偽類選擇器
- 偽元素選擇器
- 屬性選擇器
這五大類里每一類又分別有很多類型的選擇器，可以說是一個龐大的“選擇器”家族砂碉。然而蛀蜜，在實際使用過程當(dāng)中，用的最多的其實也就那么幾種而已增蹭，比如標(biāo)簽選擇器滴某，類選擇器，ID選擇器等滋迈。那么霎奢，我們在需要使用選擇器的時候，優(yōu)先考慮的究竟是什么呢饼灿？這時候有的同學(xué)肯定會疑惑幕侠，難道不是哪個更方便就用哪個嗎？
其實不然碍彭。我們從零學(xué)習(xí)前端開發(fā)晤硕，最終的目標(biāo)實際上是做一個合格的開發(fā)者，所以優(yōu)先考慮的肯定是“合格”二字庇忌。所以舞箍，在使用選擇器的時候，我們要考慮選擇器優(yōu)化這個概念漆枚。
對于瀏覽器來說创译，解析每種選擇器所耗費的時間并不一樣，那么如何才能寫出最優(yōu)選擇器呢墙基？
(引用內(nèi)容來源于IMWeb的技術(shù)文章)
根據(jù)網(wǎng)站效率專家Steve Souders指出软族，各種CSS選擇器的效率由高到低排序如下：
- id選擇器
- 類選擇器
- 標(biāo)簽選擇器
- 相鄰選擇器
- 子選擇器
- 后代選擇器
- 通配符選擇器
- 屬性選擇器
- 偽類選擇器
假如現(xiàn)在需要對一個p元素來使用選擇器：
<p id="text" class="red">這是一個段落<p>
我們可以通過很多方法選中它，標(biāo)簽選擇器残制，類選擇器立砸，id選擇器都能做到，但按照執(zhí)行效率來說初茶，id選擇器是最佳的颗祝，其次是類選擇器，然后是元素選擇恼布，最后才是屬性選擇器螺戳。
這里有一個小例子，作為一個前端新手折汞，我剛開始練習(xí)CSS的時候倔幼，習(xí)慣在例子中使用了通用選擇器“*”來清除margin和padding：
*{margin: 0; padding: 0;}
直到后來，看到別人清除瀏覽器默認(rèn)樣式的時候都寫一大長串爽待，甚至引入一個專門的CSS文件來用于清除默認(rèn)樣式损同，我十分不解翩腐，用通用選擇器豈不是更方便？
后來才明白膏燃，這樣做反而是最沒有效率的茂卦！原因在于瀏覽器匹配文檔中所有的元素后會分別向上逐級匹配，一直到文檔的根節(jié)點才作罷组哩，這樣匹配的開銷是非常大的等龙。所以，應(yīng)當(dāng)避免使用通用選擇器禁炒。
還有一個問題很關(guān)鍵：瀏覽器又是如何識別你寫的選擇器的呢而咆？
實際上，瀏覽器讀取你的選擇器幕袱，遵循的原則是從選擇器的右邊到左邊讀取暴备。也就是說，順序是從右到左们豌。
所以當(dāng)你給一個元素寫了相當(dāng)多的選擇器涯捻，瀏覽器會從右到左來尋找，顯然路徑鏈會影響效率望迎。因此障癌，建議選擇器的層級最多不要超過四層。
綜上所述辩尊，在使用選擇器的時候涛浙，其實要做一個綜合考慮，每一次都用最優(yōu)解來使用摄欲，這樣才能提高代碼的效率轿亮。
二、CSS優(yōu)先級
CSS中的優(yōu)先級大概如下：
胸墙！important > style > id選擇器 > 類選擇器 > 元素選擇器 > "" > 瀏覽器默認(rèn) > 繼承*
這樣的優(yōu)先級比較方式比較籠統(tǒng)我注，所以還有一種比較普遍的簡化方式：
我們把每一個選擇器都用一個數(shù)字（權(quán)重值）來表示，元素選擇器用個位數(shù)迟隅，類選擇器用十位數(shù)但骨，id選擇器用百位數(shù)。
| 選擇器 | 權(quán)重值 |
|---|---|
| id選擇器 | 100 |
| 類選擇器 | 10 |
| 元素選擇器 | 1 |
于是智袭，權(quán)重的計算我們可以總結(jié)如下圖所示：
其中奔缠，沒選中代表的就是繼承來的屬性。
知道了選擇器的優(yōu)先級吼野，那么元素最終的樣式究竟是如何得出的呢添坊？
我們知道，一個元素的樣式來源有：
- 繼承自父級元素的樣式
- 瀏覽器的默認(rèn)樣式
- 元素自己聲明的樣式
最終應(yīng)用的樣式就是通過一系列復(fù)雜的計算體系而得到的箫锤。而這里面有幾個值需要注意贬蛙。
應(yīng)用值（used value）、初始值（initial value）谚攒、（inherit value）
最終應(yīng)用的樣式稱之為應(yīng)用值阳准，如果一個元素聲明了樣式，那么應(yīng)用值就是這個聲明的樣式馏臭，但如果沒有聲明野蝇，那應(yīng)用值又是什么？
這里還包括了兩個特殊的值：繼承值和初始值括儒。
一個屬性默認(rèn)是繼承的绕沈，我們得到的它的父元素的同屬性的應(yīng)用值就叫做繼承值。如果屬性是默認(rèn)不繼承的帮寻，那么就會有一個初始值乍狐，這個初始值實際上就是一個默認(rèn)的值，比如width的初始值是auto固逗。
三浅蚪、CSS重置
有關(guān)CSS重置之前已經(jīng)提到過，就是清除瀏覽器默認(rèn)樣式烫罩。
對于不同的瀏覽器惜傲，其默認(rèn)樣式都是不一樣的，而且默認(rèn)樣式有時候?qū)嶋H上就如同畫蛇添足一般贝攒，清除是非常必要的盗誊。
CSS重置分為兩種，一種是糾正重置隘弊，一種是清零重置
糾正重置哈踱，就如字面意思，因為瀏覽器默認(rèn)樣式有差異的緣故长捧，我們需要來消除這些差異嚣鄙，讓頁面在不同的瀏覽器中看起來一致。開源的normalize.css就可以做到這一點串结，這里不再贅述哑子。
清零重置，就是徹底的去除默認(rèn)樣式肌割，這個可以根據(jù)自己的需求來寫卧蜓，也可以參考一些文檔，例如：Eric Meyer's Reset CSS 2.0
我的個人Blog：chronosblog.top
我的微信公眾號：runtustory
