css優先順序彙總

傑克.陳發表於2014-11-12
CSS
原文:css優先順序彙總

　　我所理解的css優先順序：當兩個或者多個樣式作用於同一個元素時，就會出現css優先順序的問題。

　　多重樣式優先順序：當內聯樣式、內部樣式和外部樣式作用於同一個元素時，屬於多重樣式的範疇。優先順序的順序為內聯樣式>內部樣式>外部樣式。

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
/*.color{color:red;}外部樣式*/
<style>/*內部樣式*/
.color{color:black;}
<style/>
</head>
<body>
　　<a href="" class="color" style="color:blue">我愛變色</a>
　　/*內聯樣式*/
</body>
/*不出意外的話，應該顯示為藍色，前提是內部樣式要放在外部樣式的後面*/

　　選擇器的優先權：不同種類的選擇器通過權值來計算其優先權的大小。

權值大小：

1.內聯樣式權值最高為[1000];

2.id選擇器權值為[0100];

3.class、屬性、偽類選擇器權值為[0010];

4.元素標籤、偽元素選擇器權值為[0001];

5.通用選擇器權值為[0000];

解釋：權值是一個4位的數字串，從左到右，一級大於一級，每一級之間沒有進位制，不可跨越。在進行權值比較的時候，應該從左到由進行比較。

<style type="text/css">
.contain .box p{color:red}/*權值：0010+0010+0001=0021*/
.contain div p{color:black}/*權值：0010+0001+0001=0012*/
</style>
<div class="contain">
　　<div class="box">
   　　<p>顏色</p>
　　</div>
</div>
/*p標籤內容應該為紅色*/

　　CSS 優先順序法則：

A  選擇器都有一個權值，權值越大越優先；

B  當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定；

C  創作者的規則高於瀏覽者：即網頁編寫者設定的CSS 樣式的優先權高於瀏覽器所設定的樣式；

D  繼承的CSS 樣式不如後來指定的CSS 樣式；

E  在同一組屬性設定中標有“!important”規則的優先順序最大

 

<style type="text/css"> 
    div{background: red !important; background: blue}
</style> ­
/*顯示為紅色，ie6顯示為藍色，在ie6下，!important跟沒用是一樣的效果*/

 


相關文章