CSS特殊性、繼承與層疊
- 黄舟原創
- 2016-12-17 13:29:161201瀏覽
一、特殊性規則
選擇器的特殊性由選擇器本身的組件決定；特殊性由四個部分組成，其初始值為0，0，0，0。
1. 對於選擇器中的每一個id，加0，1，0，0；
2. 對於選擇器中的每一個類別、偽類、屬性選擇，加0，0，1，0；
3. 對於選擇器中的每一個元素、偽元素，加0，0，0，1；
4. 結合符與通配符對於選擇器的特殊性沒有任何貢獻。
注意：
1. 0，0，1，0的特殊性比0，0，0，13的特殊性更高。
2. 通配符* 的特殊性為0，0，0，0，它是有特殊性的；結合符（例如h1+p中的「+」）根本沒有特殊性；繼承而來的樣式也沒有特殊性。
請看如下程式碼：
<head>
<style>
*{
color:red;
}
body{
color:cyan;
}
</style>
</head>
<body>
<p>Whatkindofcolorthisparawillbe?</p>
</body>頁顯示如下：
4. 行內樣式的特殊性最高，為1，0，0，0。
5. 標記為!important的聲明被稱為重要聲明，它沒有特殊性，不過要與非重要聲明分開考慮。
具體而言：非重要聲明分為一組，它們之間的衝突使用特殊性解決；重要聲明分為一組，它們之間的衝突內部解決；重要聲明總是比非重要聲明優先。
二、繼承
1. 繼承沒有任何特殊性，記住這一點往往能明白很多問題。
請看以下程式碼：
<head>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p>
</body>頁面效果：
為什麼設定了
元素的顏色為紅色，元素的顏色卻是藍色？
這並不是因為元素不繼承父元素的顏色（原諒我之前就是這麼認為的），而是因為元素繼承了 元素的顏色，但是這個繼承來的樣式根本沒有特殊性，然而瀏覽器預設樣式中對元素設定了樣式，很明顯瀏覽器預設樣式的特殊性更高，於是元素就按照瀏覽器預設樣式顯示。 2.
關於CSS中的繼承：一般而言，只能子元素繼承父元素的樣式，也就是說樣式在DOM中只能向下傳遞，不能向上；但是有一個例外，應用到body元素的背景樣式可以向上傳遞到html元素，相應地可以定義其畫布。 三、層疊 層疊規則： 1. 依權重排序。讀者重要聲明>作者重要聲明>作者一般聲明>讀者一般聲明>用戶代理聲明。 2. 權重相同的情況下，依照特殊性排序，特殊性越高的勝出。 3. 特殊性相同的情況下，依照樣式表中的順序排序，後出現的勝出。 btw，正是因為這個規則，才會使用LoVe-HA的順序宣告連結樣式（LoVe-HA 依序為 :link; :visited; :hover;
:active）。 以上就是CSS特殊性、繼承與層疊的內容，更多相關文章請關注PHP中文網（www.php.cn）！