首頁 > web前端 > css教學 > 主體

CSS特殊性、繼承與層疊

黄舟
發布: 2016-12-17 13:29:16
原創
1182 人瀏覽過

一、特殊性規則

選擇器的特殊性由選擇器本身的組件決定;特殊性由四個部分組成,其初始值為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>
登入後複製

頁顯示如下:

CSS特殊性、繼承與層疊

4. 行內樣式的特殊性最高,為1,0,0,0。

5. 標記為!important的聲明被稱為重要聲明,它沒有特殊性,不過要與非重要聲明分開考慮。

具體而言:非重要聲明分為一組,它們之間的衝突使用特殊性解決;重要聲明分為一組,它們之間的衝突內部解決;重要聲明總是比非重要聲明優先。

二、繼承

1. 繼承沒有任何特殊性,記住這一點往往能明白很多問題。

請看以下程式碼:

<head> 
<style> 
p{ 
color:red; 
} 
</style> 
</head> 
<body> 
<p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p> 
</body>
登入後複製

頁面效果:

CSS特殊性、繼承與層疊

為什麼設定了

元素的顏色為紅色,元素的顏色卻是藍色?

這並不是因為元素不繼承父元素的顏色(原諒我之前就是這麼認為的),而是因為元素繼承了

元素的顏色,但是這個繼承來的樣式根本沒有特殊性,然而瀏覽器預設樣式中對元素設定了樣式,很明顯瀏覽器預設樣式的特殊性更高,於是元素就按照瀏覽器預設樣式顯示。

2. 關於CSS中的繼承:一般而言,只能子元素繼承父元素的樣式,也就是說樣式在DOM中只能向下傳遞,不能向上;但是有一個例外,應用到body元素的背景樣式可以向上傳遞到html元素,相應地可以定義其畫布。

三、層疊

層疊規則:

1. 依權重排序。讀者重要聲明>作者重要聲明>作者一般聲明>讀者一般聲明>用戶代理聲明。

2. 權重相同的情況下,依照特殊性排序,特殊性越高的勝出。

3. 特殊性相同的情況下,依照樣式表中的順序排序,後出現的勝出。

btw,正是因為這個規則,才會使用LoVe-HA的順序宣告連結樣式(LoVe-HA 依序為 :link; :visited; :hover; :active)。

 以上就是CSS特殊性、繼承與層疊的內容,更多相關文章請關注PHP中文網(www.php.cn)! 


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板