前端面試題-CSS優先級

1、選擇器優先級

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

2、優先級計算

優先級就是分配給指定的CSS聲明的一個權重，它由匹配的選擇器中的每一種選擇器類型的 數值 決定。

而當優先級與多個CSS聲明中任意一個聲明的優先級相等的時候，CSS中最後的那個聲明將會被應用到元素上。

當同一個元素有多個聲明的時候，優先級纔會有意義。由於每個直接做用於元素的CSS規則老是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規則。

3、優先級順序

3.1 選擇器權重值

3.2 從大到小

內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 僞類選擇器 > 元素（類型）選擇器 = 僞元素選擇器

3.2 注意

通配選擇符（universal selector）(*), 關係選擇符（combinators） (+, >, ~, ' ') 和 否認僞類（negation pseudo-class）(:not()) 對優先級沒有影響。（可是，在 :not() 內部聲明的選擇器是會影響優先級）。

4、特殊的 !important 規則

4.1 說明

當在一個樣式聲明中使用一個 !important 規則時，此聲明將覆蓋任何其餘聲明。雖然技術上 !important 與優先級無關，但 !important 卻又與 CSS 優先級直接相關。

4.2 破壞級聯規則

使用 !important 是一個壞習慣，應該儘可能避免，由於這破壞了樣式表中的固有的級聯規則 使得調試找 bug 變得更加困難了。當兩條相互衝突的帶有 !important 規則的聲明被應用到相同的元素上時，擁有更大優先級的聲明將會被採用。

擴展閱讀 前端面試題-CSS選擇器