文章目錄
- CSS權重是什麼
- 如何確定權重優先順序 - 特殊性
- 如何確定權重優先順序 - 重要性
- 相同權重如何顯示
- 總結
CSS權重是什麼
根據MDN的引用
瀏覽器通過優先順序來判斷哪一些屬性值與一個元素最為相關，從而在該元素上應用這些屬性值。優先順序是基於不同種類選擇器組成的匹配規則
換一句更為直白的就是，使用權重決定哪些CSS會被應用到文件元素中。
如何確定優先順序 - 特殊性
權重的優先順序根據特殊性進行分佈，使用四個緯度進行判斷，用0.0.0.0進行表示。
- 標籤選擇器，偽類元素表示為0.0.0.1
- 類，偽類，屬性選擇器表示為0.0.1.0
- ID選擇器為0.1.0.0
- 行內選擇器為1.0.0.0
同級的選擇器可以進行疊加，值越高的優先順序越高。不同級別的不能進行比較，一律以高階別的優先順序更高。
用幾個例子進行進行說明
-
示例一
body div p { color: pink; }
0.0.0.3
p { color: red; }
複製程式碼0.0.0.1
div p { color: green; }
複製程式碼0.0.0.2
優先順序為第一個最高，因為使用了三個標籤選擇器確定了優先順序為三。頁面p中呈現的顏色為pink；
-
示例二
.title { color: blue; }
0.0.1.0
p.title { color: blueviolet; }
複製程式碼0.0.1.1
// 給p元素設定一個pset屬性
p[pset].title { color: brown; }
複製程式碼0.0.2.1
優先順序最高的為第三個，其中屬性選擇器，類選擇器疊加為2，標籤選擇器為1。所有優先顯示第三個。
-
示例三
.title { color: red; }
0.0.1.0
div p[pset].title { color: green; }
複製程式碼0.0.2.2
#p-id { color: brown; }
複製程式碼0.1.0.0
這裡會有限顯示第三組，CSS在優先順序的選擇上，是不盡興跨等級比較，即只需要高等級有值，則只會在高等級進行比較。因為ID選擇器在第三等級，高於第三和第四等級，所以不論第三和第四等級時候有值，只會選擇第三等級進行比較。
-
示例四
div p[pset].title { color: green; }
0.0.2.2
#p-id { color: brown; }
複製程式碼0.1.0.0
這裡會優先顯示yellow，行內元素的等級最高，為1.0.0.0，基於跨等級不進行比較，所有無需關心除了第一等級以外的優先順序。
如何確定權重優先順序 - 重要性
區別於CSS的特殊性，還有另外一個重要的特性，就是重要性 !important，important和特殊性不在一個維度上，不能進行值大小的比較。重要性的優先順序是永遠高於特殊性的。所以只要使用了!important，則一直優先顯示重要性制定的CSS屬性。
.title { color: green !important; }
複製程式碼相同權重如何顯示
當針對同一個元素有幾組CSS描述，難免會有權重相同的。這個時候如何進行顯示，則依賴於就近原則，即最後出現的CSS描述會被瀏覽器使用。我們一般認為"行內元素" > "內聯" > "外部連結"。但是也有可能外部連結是嵌入到內聯的下方，此時在權重相同的時候會優先顯示外鏈的CSS。如下編碼方式。就近原則同樣適用於重要性，後出現的!important會覆蓋之前的!important。
<head>
<style></style>
<link rel="stylesheet" href="some.css">
</head>
複製程式碼總結
網上關於CSS權重的文章汗牛充棟，很大一部分直接使用100，10這種記法。但是並不知道100，10如何而來，導致一直不容易記住。本文對權重的記錄方案來自於《CSS權威指南》，自認為還是很容易記錄的，而且邏輯清楚。