面試官：通熟易懂理解CSS權重

時間 2019-12-04

標籤面試易懂理解 css 權重欄目快樂工作简体版

原文原文鏈接

文章目錄

CSS權重是什麼
如何肯定權重優先級 - 特殊性
如何肯定權重優先級 - 重要性
相同權重如何顯示
總結

CSS權重是什麼

根據MDN的引用css

瀏覽器經過優先級來判斷哪一些屬性值與一個元素最爲相關，從而在該元素上應用這些屬性值。優先級是基於不一樣種類選擇器組成的匹配規則瀏覽器

換一句更爲直白的就是，使用權重決定哪些CSS會被應用到文檔元素中。編碼

如何肯定優先級 - 特殊性

權重的優先級根據特殊性進行分佈，使用四個緯度進行判斷，用0.0.0.0進行表示。spa

標籤選擇器，僞類元素表示爲0.0.0.1
類，僞類，屬性選擇器表示爲0.0.1.0
ID選擇器爲0.1.0.0
行內選擇器爲1.0.0.0

同級的選擇器能夠進行疊加，值越高的優先級越高。不一樣級別的不能進行比較，一概以高級別的優先級更高。code

用幾個例子進行進行說明文檔

示例一it

body div p { color: pink; }io

0.0.0.3class

p { color: red; }
複製代碼

0.0.0.1import

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權威指南》，自認爲仍是很容易記錄的，並且邏輯清楚。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。