CSS選擇器的權重值在CSS中非常重要,它會決定哪一個規則優先生效,哪一個規則被覆蓋。
選擇器 權重 ID選擇器 100 類、屬性、偽類選擇器效 10 元素、偽元素選擇器 1 通配符選擇器 0
上面的表格就是CSS選擇器的權重值,權重值是一個優先級的概念,這個優先級會決定哪一個規則會被瀏覽器優先采用。舉個例子:
#test{color:green} .hello{color:red}
如果你的HTML代碼是這樣的:
Hello, world!
這個時候文字顏色會是什么顏色呢?如果你認為是綠色的,那就錯了。雖然ID選擇器具有更高的權重,但是同樣匹配元素的類選擇器也有一定的作用,而且類選擇器匹配元素的能力更強,因為可以匹配多個元素,而ID選擇器只能匹配一個元素。所以這個時候,文字顏色會是紅色的。
除了上面的四個選擇器,還有一些其他的選擇器,例如后代選擇器和并集選擇器,這些選擇器的權重值和上面的表格類似,但是具體權重值要根據不同的情況來計算。
因此,在編寫CSS樣式的時候,要注意選擇器的權重值,避免不必要的覆蓋。
上一篇為什么要弄css前綴
下一篇為什么不能直接使用css