DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 權重和層疊規則決定了CSS樣式優先級
權重和層疊規則決定了CSS樣式優先級
編輯:CSS詳解     
基本的規則為同一級別的個數,數量多的優先級高,影響CSS樣式權重的兩個因素即順序、數量,下面由幾個示例,大家可以感受下   首先,給大家看一篇關於CSS優先級的示例

復制代碼代碼如下:
<span style=”font-size:14px;”><Html>
<head>
<style type=”text/CSS”>
#redP p {
/* 權值 = 100+1=101 */
color:#F00; /* 紅色 */
}
#redP .red em {
/* 權值 = 100+10+1=111 */
color:#00F; /* 藍色 */
}
#redP p span em {
/* 權值 = 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>


一、基本的優先級規則

比較同一級別的個數,數量多的優先級高,如果相同即比較下一級別的個數,至於各級別的優先級如下:

important > 內聯 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 通配符 > 繼承

二、CSS權重規則

在《頁面重構中的模塊化設計》中提到,影響CSS樣式權重,有兩個重要因素:

A:樣式的優先級跟樣式定義的順序有關

B:權值的大小跟選擇器的類型和數量有關

一般來說,在同一個CSS文件中,如果有兩個同名的樣式,則後定義的會覆蓋先定義的。選擇器類型的優先級見(一)。

那麼,CSS的權重是怎麼算的呢?

一個selector的權重表示方式:0.0.0.0,按照計算規則給每位填充數字,對應位置相等,則比較下一位。

權重的計算規則如下:(為方便,用A.B.C.D代替各位置的值)

1、內嵌樣式: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、類,偽類,以及屬性的個數就是第三位的值:

.a.b[type="text"]:hover{},選擇器中有2個類,1個屬性,1個偽類,所以它的第3位為4, A=B=D=0,C=4,(即0.0.4.0)

4、偽元素和標簽元素的個數就是第四位的值

p:first-letter,有一個標簽元素p和偽元素first-letter,值為2,A=B=C=0,D=2(即0.0.0.2)

5、通配符和繼承得到的CSS屬性對權重沒有影響

三、幾個示例

針對以上,看以下幾個示例

1、.a .b .c {color:red;} //0.0.3.0 說明:只有三個類

2、*{…} //0.0.0.0 說明:通配符對權重沒有影響

3、.a .b a {color:green} //0.0.2.1 說明:兩個類和一個標簽

4、#hid {color:black;} //0.1.0.0 說明:只有一個ID
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved