對于 csser 來說，多多少少都會(huì)遇到過 “樣式規(guī)則不生效？”、“樣式規(guī)則被覆蓋？” 等等問題，這些都與 CSS 權(quán)重有關(guān)系。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺(tái)私信我：前端，即可免費(fèi)獲取
選擇器匹配原理
在此之前，容我先簡單介紹瀏覽器是怎么通過各種選擇器，把樣式規(guī)則和 DOM 元素扯上關(guān)系的。
瀏覽器中存在著專門的渲染引擎來渲染 html 文檔。這里以 Webkit 內(nèi)核為例，在啟動(dòng)渲染流程時(shí)，引擎一方面會(huì)解析 HTML 文檔，構(gòu)建 DOM 節(jié)點(diǎn)樹（DOM Tree），另一方面會(huì)解析樣式文件生成 樣式規(guī)則（Style Rules），然后結(jié)合分析 DOM 樹和樣式規(guī)則生成 渲染樹（Render Tree），最后 布局 和 繪制 出 UI 界面。
Webkit 渲染流程（摘自 https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/）
CSS 的選擇器匹配就發(fā)生在 渲染樹 的構(gòu)建過程。瀏覽器會(huì)從 DOM 樹的根節(jié)點(diǎn)開始遍歷每個(gè)可見節(jié)點(diǎn)，對于每個(gè)可見節(jié)點(diǎn)都會(huì)在規(guī)則表中查找適配的樣式規(guī)則。那么，如此龐大的樣式數(shù)據(jù)和復(fù)雜的選擇器結(jié)構(gòu)，渲染引擎是怎么尋找到適配當(dāng)前元素的樣式規(guī)則呢？
請看下面這個(gè)復(fù)合選擇器。如果引擎是按照從左向右的順序匹配選擇器，將會(huì)導(dǎo)致大量 回溯的發(fā)生：先是在當(dāng)前節(jié)點(diǎn)到 DOM 樹跟節(jié)點(diǎn)的路徑上尋找 div 元素，然后沿著分支路徑繼續(xù)往下找第二個(gè) div 元素，如果當(dāng)前路徑找不到，就得回退到上一個(gè) div 元素嘗試另一條分支路徑。如此往復(fù)，對性能損耗將會(huì)非常嚴(yán)重。
div div span .text {}
所以，引擎是采取 從右向左 的順序來匹配選擇器。也就是 從最具體的選擇器開始，如果與當(dāng)前節(jié)點(diǎn)不匹配，則直接拋棄該條規(guī)則；如果匹配，只需要沿著路徑往上確認(rèn)其他選擇器是否也匹配，這樣做可以大大減少無效的匹配數(shù)，提高性能。除此之外，引擎還會(huì)把不同類型的選擇器（id、class、tag 及其他類型）歸類到哈希表中，進(jìn)一步減少查找基數(shù)。
了解選擇器的匹配原理，有利于我們理解其權(quán)重規(guī)則，對于編寫簡潔、高效的 CSS 代碼非常有幫助。
CSS 權(quán)重
通過不同的方式（內(nèi)聯(lián)樣式、外部樣式表）、不同類型的選擇器組合針對某個(gè)元素聲明樣式規(guī)則時(shí)，如何決定最終哪個(gè)聲明會(huì)被應(yīng)用到元素上？這就涉及到 CSS 權(quán)重（也指優(yōu)先級，Specificity）。
圍繞 CSS 權(quán)重主要有以下三條規(guī)則：
- 權(quán)重不同的樣式規(guī)則作用于同一元素時(shí)，權(quán)重高的規(guī)則生效；
- 權(quán)重相同的樣式規(guī)則作用于同一元素時(shí)，后聲明的規(guī)則生效；
- 選擇器在 DOM 中的位置關(guān)系不會(huì)對規(guī)則產(chǎn)生影響。
<html>
<head>
<style>
body div {
color: red;
}
html div {
color: blue;
}
</style>
</head>
<body>
<div>測試</div>
</body>
<html>
- 這里的 body 標(biāo)簽元素在 DOM 中離目標(biāo) div 更近，但最后還是按照樣式規(guī)則的聲明順序來決定。
- 直接作用于元素的樣式規(guī)則優(yōu)先級高于從祖先元素繼承的規(guī)則；
<html>
<head>
<style>
#parent {
color: red;
}
span {
color: blue;
}
</style>
</head>
<body>
<div id="parent">
<span>測試</span>
</div>
</body>
<html>
CSS 權(quán)重等級
如何比較不同選擇器的權(quán)重高低？這里劃分成 5 個(gè)權(quán)重等級，按照等級 由高到低 的順序：
- !important 關(guān)鍵字
- 內(nèi)聯(lián)樣式
<div style="color: #fff;">測試</div>
id 選擇器
#demo {}
類選擇器、屬性選擇器、偽類選擇器
.demo {}
[type="text"] {}
div:hover {}
div:first-child {}
需要注意，否定偽類（:not()）比較特殊，它不會(huì)對權(quán)重產(chǎn)生影響，但是 否定偽類內(nèi)部的選擇器會(huì)影響權(quán)重。
<html>
<head>
<style>
div#demo span {
color: red;
}
div:not(#demo) span {
color: blue;
}
</style>
</head>
<body>
<div id="demo">
<span>普通 demo</span>
<div id="pseudo">
<span>否定偽類 demo</span>
</div>
</div>
</body>
<html>
- 實(shí)例中，:not(#demo) 的權(quán)重值和 #demo 的權(quán)重值是相等的，所以后面聲明的樣式規(guī)則成功生效。
- 標(biāo)簽選擇器、偽元素選擇器
div {}
div:before {}
div:after {}
除了上述的選擇器之外，通配符選擇器（*） 和 結(jié)合符（+、>、~）對優(yōu)先級沒有影響。
對于復(fù)雜的復(fù)合選擇器，我們需要逐個(gè)等級比較權(quán)重大小，不允許跨越等級比較。為了方便計(jì)算，我們可以把權(quán)重值具象化，每出現(xiàn)一個(gè)選擇器就在其對應(yīng)的等級區(qū)間中權(quán)重值加 1，參考下面實(shí)例：
* {} /* 權(quán)重值 0-0-0-0-0 */
div {} /* 權(quán)重值 0-0-0-0-1 */
div h1+h2 {} /* 權(quán)重值 0-0-0-0-3 */
div, ... div {} /* 權(quán)重值 0-0-0-0-n */
#demo a:hover {} /* 權(quán)重值 0-0-1-1-1 */
國外大神 把 CSS 權(quán)重的計(jì)算模擬成海洋生物鏈，選擇器組合權(quán)重越大則在生物鏈位置越高，非常淺顯生動(dòng)，建議收藏。
圖片轉(zhuǎn)自 https://specifishity.com/
建議
在充分了解 CSS 選擇器匹配原理和權(quán)重規(guī)則之后，在編寫 CSS 代碼時(shí)不妨多注意以下細(xì)節(jié)：
- 盡量不要使用 !important，尤其是在 對外提供的插件 和 全站范圍的樣式表 中，這會(huì)對模塊代碼中的樣式覆蓋帶來非常大的麻煩。
- !important 關(guān)鍵字的權(quán)重值為 1-0-0-0-0，只需要按照權(quán)重規(guī)則繼續(xù)累加權(quán)重值即可覆蓋該樣式屬性。
<html>
<head>
<style>
div {
color: red !important;
}
/* 通過 id選擇器 增加權(quán)重 */
#demo {
color: blue !important;
}
</style>
</head>
<body>
<div id="demo">測試</div>
</body>
<html>
減少不必要的選擇器嵌套，嵌套最好不要超過三級。大量的復(fù)合選擇器，會(huì)影響選擇器匹配的效率，同時(shí)也會(huì)增加 CSS 樣式文件的體積，不易維護(hù)。
當(dāng)出現(xiàn)大量嵌套時(shí)，我們可以指定一個(gè)更具體的類選擇器來替換復(fù)合選擇器。
body div ul li span {}
.li {}
