前端面試題 CSS優先順序

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

優先順序就是分配給指定的css宣告的乙個權重，它由匹配的選擇器中的每一種選擇器型別的數值決定。

而當優先順序與多個css宣告中任意乙個宣告的優先順序相等的時候，css中最後的那個宣告將會被應用到元素上。

當同乙個元素有多個宣告的時候，優先順序才會有意義。因為每乙個直接作用於元素的css規則總是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規則。

內聯樣式 > id 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 元素（型別）選擇器 = 偽元素選擇器

通配選擇符（universal selector）(*), 關係選擇符（combinators） (+, >, ~, ' ') 和否定偽類（negation pseudo-class）(:not())對優先順序沒有影響。（但是，在:not()內部宣告的選擇器是會影響優先順序）。

當在乙個樣式宣告中使用乙個 !important 規則時，此宣告將覆蓋任何其他宣告。雖然技術上!important 與優先順序無關，但 !important 卻又與 css 優先順序直接相關。

使用 !important 是乙個壞習慣，應該盡量避免，因為這破壞了樣式表中的固有的級聯規則使得除錯找 bug 變得更加困難了。當兩條相互衝突的帶有 !important 規則的宣告被應用到相同的元素上時，擁有更大優先順序的宣告將會被採用。

擴充套件閱讀前端面試題-css選擇器