0%

CSS: Specificity

CSS中每個規則、標籤會有不同的權重,所以對相同標籤下不同規則會互相覆蓋,而誰覆蓋誰就是由權重決定。所謂的Specificity(優先級、權重)就是瀏覽器用來決定權重的算法。

權重排序

含有!important的規則 > 直接寫在html上的style屬性 > ID選擇器 > 類別、偽類別、屬性選擇器 > 標籤、偽元素選擇器

順序也會影響權重

css的寫法是由上而下,除了標籤本身的權重(上述所示),在css檔案中的排序也會影響權重,越下方的權重越大,但順序的影響力並沒有原本權重排序來的大,所以ID選擇器就算寫在上方也不會被類別選擇器蓋掉,要特別注意

關係選擇器可以看成加法

以最常見的後代選擇器來說

1
2
3
.box h2{
....
}

這種就可以理解為 10 + 1的權重,會比單純的.box權重來的高,即使.box的選擇器寫在他的下方也一樣。


要學好css就一定要學會權重,這方面我也還是要多加練習,有時候會因為權重不對導致自己想要的樣式被蓋掉,在編寫上的邏輯就還要多加訓練。