404 阿裏雲技術社區[雲棲]

精通css(3)-優先級那些事兒

同一個元素可能會有多個樣式，這些樣式很可能會衝突，css通過層疊的過程來處理這種衝突，簡單的說就是給每個規則分配一個重要度。

1.層疊

層疊重要度從高到低排列順序：

1.標有！important的用戶樣式；

2.標有！important的作者樣式；

3.作者樣式；

4.用戶樣式；

5.瀏覽器/用戶代理默認樣式；

一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。通常我們用1表示標簽名選擇器的優先級，用10表示類選擇器的優先級，用100標示ID選擇器的優先級。直接在網頁中用sytle="...."的優先級最高，為1000，但是不推薦這樣用，你懂的。舉個例子：

    div.test1 .span p{...} 優先級= 1+10 +10 +1  
    span#xxx .songs li {...}優先級=1+100 + 10 + 1  
    #xxx li {...}優先級= 100 +1

另外，偽元素的優先值同html 其他元素，偽類的優先值與類的計算一樣，還有類似["id=content"]這樣的選擇器，也跟類的級別一樣。

繼承就是應用樣式的元素後代會繼承樣式的某些屬性。這句話很容易理解，但是"某些屬性"有些坑啊，你特麼到底是哪些屬性啊？

首先要明確一點：直接應用於元素的任何樣式都會覆蓋繼承而來的屬性。比如你對body設置了font-size：10px;的屬性，但是h1，h2都不聽你的，因為瀏覽器默認給h1，h2設置了字體大小，覆蓋了繼承而來的樣式。

然後網頁中用到的繼承大多都是文本方麵的繼承，比如font-size，font-color之類的。邊框類的屬性是不能繼承的，比如border，margin，padding什麼的，這個要是能繼承網頁就完蛋了。

有些瀏覽器在繼承方麵還有些問題，比如說高貴冷豔的IE，在繼承表格字號方麵會有些問題。總的來說，在寫代碼的時候除了文本繼承外，其他的都不要指望用繼承了，直接用選擇器會更好些。

最後更新：2017-04-03 14:54:04