一、特殊性規則
選擇器的特殊性由選擇器本身的組件決定;特殊性由四個部分組成,其初始值為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)!