您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

CSS中樣式覆蓋優(yōu)先順序詳解

2014/9/30 11:25:02來(lái)源：壹聚教程

 　　層疊優(yōu)先級(jí)是:

　　瀏覽器缺省 < 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式

　　其中樣式表又有:

　　類選擇器 < 類派生選擇器 < ID選擇器 < ID派生選擇器

　　派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級(jí)是:

　　瀏覽器缺省 < 外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器 < 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器 < 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式...共12個(gè)優(yōu)先級(jí)

　　有時(shí)候在寫CSS的過(guò)程中，某些限制總是不起作用，這就涉及了CSS樣式覆蓋的問(wèn)題，如下

 代碼如下  
#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
    border: solid 2 #EEE;  
}  
 
.current_block {  
    border: solid 2 #AE0;  
}

　　查找一些教材中(w3schools等)，只說(shuō)css的順序是“元素上的style” > “文件頭上的style元素” >“外部樣式文件”，但對(duì)于樣式文件中的多個(gè)相同樣式的優(yōu)先級(jí)怎樣排列，沒有詳細(xì)說(shuō)明。經(jīng)過(guò)測(cè)試和繼續(xù)搜索，得知優(yōu)先級(jí)如下排列：

　　1. 樣式表的元素選擇器選擇越精確，則其中的樣式優(yōu)先級(jí)越高。

　　id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式

　　所以上例中，#navigator的樣式優(yōu)先級(jí)大于.current_block的優(yōu)先級(jí)，即使.current_block是最新添加的，也不起作用。

　　2. 對(duì)于相同類型選擇器指定的樣式，在樣式表文件中，越靠后的優(yōu)先級(jí)越高。

　　注意，這里是樣式表文件中越靠后的優(yōu)先級(jí)越高，而不是在元素class出現(xiàn)的順序。比如.class2 在樣式表中出現(xiàn)在.class1之后：

 代碼如下  
.class1 {  
    color: black;  
}  
 
.class2 {  
    color: red;  
}

　　而某個(gè)元素指定class時(shí)采用 class=”class2 class1″這種方式指定，此時(shí)雖然class1在元素中指定時(shí)排在class2的后面，但因?yàn)樵跇邮奖砦募衏lass1處于class2前面，此時(shí)仍然是class2的優(yōu)先級(jí)更高，color的屬性為red，而非black。

　　3. 如果要讓某個(gè)樣式的優(yōu)先級(jí)變高，可以使用!important來(lái)指定。

 代碼如下  
.class1 {  
    color: black !important;  
}  
 
.class2 {  
    color: red;  
}

　　解決方案：

　　此時(shí)class將使用black，而非red。

　　對(duì)于一開始遇到的問(wèn)題，有兩種解決方案：

　　1. 將border從#navigator中拿出來(lái)，放到一個(gè)class .block中，而.block放到.current_block之前：

 代碼如下  
#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
}  
 
.block {  
    border: solid 2 #EEE;  
}  
 
.current_block {  
    border: solid 2 #AE0;  
}

　　需要默認(rèn)為#navigator元素指定class=”block”

　　2. 使用!important:

 代碼如下  
#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
    border: solid 2 #EEE;  
}  
 
.current_block {  
    border: solid 2 #AE0 !important;  
}

　　此時(shí)無(wú)需作任何其他改動(dòng)即可生效?？梢姷诙N方案更簡(jiǎn)單一些。

　　補(bǔ)充一個(gè)例子

 代碼如下  

<html>
<head>
    <title></title>
    <style type="text/css">
        div { color: #00FF00 } /* 綠色 */
        .a1 { color: #0000FF } /* 藍(lán)色 */
        .a1 div { color: #00FFFF } /* 青色 */
        .a2 { color: #FF0000 } /* 紅色 */
        #a2 { color: #FFFF00 } /* 黃色 */
        #a2 div { color: #FF00FF } /* 紫色 */
    </style>
</head>
<body>
  <div>我是綠色，內(nèi)部樣式表優(yōu)先于瀏覽器缺省</div>
  <div class="a2">我是紅色，類選擇器優(yōu)先于內(nèi)部樣式表</div>
  <div class="a2" id="a2">我是黃色，ID選擇器優(yōu)先于類選擇器</div>
  <div class="a1">
      <span>我是藍(lán)色，類選擇器優(yōu)先于內(nèi)部樣式表</span>
      <div>我是青色，類派生選擇器優(yōu)先于類選擇器</div>
      <div class="a2">我還是青色，類派生選擇器優(yōu)先于所有類選擇器</div>
      <div id="a2">
          <span>我是黃色，ID選擇器優(yōu)先于類派生選擇器</span>
          <div>我是紫色，ID派生選擇器優(yōu)先于類派生選擇器</div>
          <div class="a1">我還是紫色，ID派生選擇器優(yōu)先于所有類選擇器</div>
          <div class="a1" id="a1">我還是紫色，ID派生選擇器優(yōu)先于所有ID選擇器</div>
          <div class="a1" id="a1" style="color:#000000;">我是黑色，內(nèi)聯(lián)樣式駕到閑雜人等退下</div>
      </div>
  </div>
</body>
</html>

　　效果

CSS中樣式覆蓋優(yōu)先順序詳解 三聯(lián)

　　另外，如果同一個(gè)元素在沒有其他樣式的作用影響下，其Class定義了多個(gè)并以空格分開，其優(yōu)先級(jí)順序?yàn)椋?/p>

　　一個(gè)元素同時(shí)應(yīng)用多個(gè)class，后定義的優(yōu)先(即近者優(yōu)先)，加上!important者最優(yōu)先!

 代碼如下  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.a2 {
 font-size: 18pt;
 color: #0000FF!important;
}
.a1 {
 font-size: 9pt;
 color: #FF0000;
}
</style>
</head>

<body>
<br />
<span class="a1">a1</span><br />
<span class="a2">a2</span><br />
<span class="a2 a1">a2 a1</span><br />
<span class="a1 a2">a1 a2</span><br />
</body>
</html>

　　運(yùn)行后的效果圖：

CSS中樣式覆蓋優(yōu)先順序詳解
[教程作者：佚名]
關(guān)鍵詞：樣式 覆蓋 優(yōu)先 順序 詳解
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://irelandcustomcontracting.com/tutorial/wd2216.html
CSS3動(dòng)態(tài)效果學(xué)習(xí)筆記
瀏覽器如何判斷css優(yōu)先級(jí)
圖趣網(wǎng)微信
建議反饋
×