權(quán)重和層疊規(guī)則決定了CSS樣式優(yōu)先級
發(fā)布時間:2014-10-20 16:36:31 作者:佚名
我要評論

基本的規(guī)則為同一級別的個數(shù),數(shù)量多的優(yōu)先級高,影響CSS樣式權(quán)重的兩個因素即順序、數(shù)量,下面由幾個示例,大家可以感受下
首先,給大家看一篇關(guān)于CSS優(yōu)先級的示例
<span style=”font-size:14px;”><html>
<head>
<style type=”text/css”>
#redP p {
/* 權(quán)值 = 100+1=101 */
color:#F00; /* 紅色 */
}
#redP .red em {
/* 權(quán)值 = 100+10+1=111 */
color:#00F; /* 藍色 */
}
#redP p span em {
/* 權(quán)值 = 100+1+1+1=103 */
color:#FF0;/*黃色*/
}
</style>
</head>
<body>
<div id=”redP”>
<p class=”red”>red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html></span>
一、基本的優(yōu)先級規(guī)則
比較同一級別的個數(shù),數(shù)量多的優(yōu)先級高,如果相同即比較下一級別的個數(shù),至于各級別的優(yōu)先級如下:
important > 內(nèi)聯(lián) > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 通配符 > 繼承
二、CSS權(quán)重規(guī)則
在《頁面重構(gòu)中的模塊化設(shè)計》中提到,影響CSS樣式權(quán)重,有兩個重要因素:
A:樣式的優(yōu)先級跟樣式定義的順序有關(guān)
B:權(quán)值的大小跟選擇器的類型和數(shù)量有關(guān)
一般來說,在同一個CSS文件中,如果有兩個同名的樣式,則后定義的會覆蓋先定義的。選擇器類型的優(yōu)先級見(一)。
那么,CSS的權(quán)重是怎么算的呢?
一個selector的權(quán)重表示方式:0.0.0.0,按照計算規(guī)則給每位填充數(shù)字,對應(yīng)位置相等,則比較下一位。
權(quán)重的計算規(guī)則如下:(為方便,用A.B.C.D代替各位置的值)
1、內(nèi)嵌樣式:A=1,B=C=D=0(即1.0.0.0)
2、ID樣式:selector中帶幾個ID,第2位就加幾個1 如#header{color:red},就是A=C=D=0,B=1(即0.1.0.0)
3、類,偽類,以及屬性的個數(shù)就是第三位的值:
.a.b[type="text"]:hover{},選擇器中有2個類,1個屬性,1個偽類,所以它的第3位為4, A=B=D=0,C=4,(即0.0.4.0)
4、偽元素和標簽元素的個數(shù)就是第四位的值
p:first-letter,有一個標簽元素p和偽元素first-letter,值為2,A=B=C=0,D=2(即0.0.0.2)
5、通配符和繼承得到的CSS屬性對權(quán)重沒有影響
三、幾個示例
針對以上,看以下幾個示例
1、.a .b .c {color:red;} //0.0.3.0 說明:只有三個類
2、*{…} //0.0.0.0 說明:通配符對權(quán)重沒有影響
3、.a .b a {color:green} //0.0.2.1 說明:兩個類和一個標簽
4、#hid {color:black;} //0.1.0.0 說明:只有一個ID
復(fù)制代碼
代碼如下:<span style=”font-size:14px;”><html>
<head>
<style type=”text/css”>
#redP p {
/* 權(quán)值 = 100+1=101 */
color:#F00; /* 紅色 */
}
#redP .red em {
/* 權(quán)值 = 100+10+1=111 */
color:#00F; /* 藍色 */
}
#redP p span em {
/* 權(quán)值 = 100+1+1+1=103 */
color:#FF0;/*黃色*/
}
</style>
</head>
<body>
<div id=”redP”>
<p class=”red”>red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html></span>
一、基本的優(yōu)先級規(guī)則
比較同一級別的個數(shù),數(shù)量多的優(yōu)先級高,如果相同即比較下一級別的個數(shù),至于各級別的優(yōu)先級如下:
important > 內(nèi)聯(lián) > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 通配符 > 繼承
二、CSS權(quán)重規(guī)則
在《頁面重構(gòu)中的模塊化設(shè)計》中提到,影響CSS樣式權(quán)重,有兩個重要因素:
A:樣式的優(yōu)先級跟樣式定義的順序有關(guān)
B:權(quán)值的大小跟選擇器的類型和數(shù)量有關(guān)
一般來說,在同一個CSS文件中,如果有兩個同名的樣式,則后定義的會覆蓋先定義的。選擇器類型的優(yōu)先級見(一)。
那么,CSS的權(quán)重是怎么算的呢?
一個selector的權(quán)重表示方式:0.0.0.0,按照計算規(guī)則給每位填充數(shù)字,對應(yīng)位置相等,則比較下一位。
權(quán)重的計算規(guī)則如下:(為方便,用A.B.C.D代替各位置的值)
1、內(nèi)嵌樣式:A=1,B=C=D=0(即1.0.0.0)
2、ID樣式:selector中帶幾個ID,第2位就加幾個1 如#header{color:red},就是A=C=D=0,B=1(即0.1.0.0)
3、類,偽類,以及屬性的個數(shù)就是第三位的值:
.a.b[type="text"]:hover{},選擇器中有2個類,1個屬性,1個偽類,所以它的第3位為4, A=B=D=0,C=4,(即0.0.4.0)
4、偽元素和標簽元素的個數(shù)就是第四位的值
p:first-letter,有一個標簽元素p和偽元素first-letter,值為2,A=B=C=0,D=2(即0.0.0.2)
5、通配符和繼承得到的CSS屬性對權(quán)重沒有影響
三、幾個示例
針對以上,看以下幾個示例
1、.a .b .c {color:red;} //0.0.3.0 說明:只有三個類
2、*{…} //0.0.0.0 說明:通配符對權(quán)重沒有影響
3、.a .b a {color:green} //0.0.2.1 說明:兩個類和一個標簽
4、#hid {color:black;} //0.1.0.0 說明:只有一個ID
相關(guān)文章
- 下面小編就為大家?guī)硪黄狢SS樣式覆蓋規(guī)則全面了解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-08-05
- 純CSS3繪制各種不規(guī)則圖形圖標樣式特效源碼是一款無需任何圖片即可實現(xiàn)逼真的圖形圖標特效,本段代碼適應(yīng)于所有網(wǎng)頁使用,有需要的朋友可以直接下載使用2016-07-14
- 網(wǎng)頁制作Webjx文章簡介:選擇符規(guī)則: 計算特性基于它們的特性級別,樣式表也可以超越與之沖突的樣式表,一個較高特性的樣式永遠都凌駕于一個較低特性的樣式。這只不過是計2009-04-02
- 這篇文章主要介紹了css樣式層疊規(guī)則,本文通過實例代碼文字說明給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-28