糯米文學吧

請輸入關鍵字詞

熱門搜尋排行

位置：首頁 > 設計 > 網頁設計

CSS中樣式覆蓋優先順序

網頁設計2.88W

優先順序是根據由每種選擇器型別構成的級聯字串計算而成的. 它不是一個對應相應匹配表示式的權重值.如果優先順序相同,元素最終會應用 CSS 中靠後的宣告.跟隨小編一起看看吧！

CSS中樣式覆蓋優先順序

　　層疊優先順序是:

瀏覽器預設 < 外部樣式表 < 內部樣式表 < 內聯樣式

其中樣式表又有:

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

派生選擇器以前叫上下文選擇器，所以完整的層疊優先順序是:

瀏覽器預設 < 外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器 < 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器 < 內部樣式表 < 內部樣式表類選擇器 < 內部樣式表類派生選擇器 < 內部樣式表ID選擇器 < 內部樣式表ID派生選擇器 < 內聯樣式...共12個優先順序

有時候在寫CSS的過程中，某些限制總是不起作用，這就涉及了CSS樣式覆蓋的問題，如下

　　程式碼如下

#navigator {

height: 100%;

width: 200;

position: absolute;

left: 0;

border: solid 2 #EEE;

}

ent_block {

border: solid 2 #AE0;

}

查詢一些教材中(w3schools等)，只說css的順序是“元素上的style” > “檔案頭上的style元素” >“外部樣式檔案”，但對於樣式檔案中的多個相同樣式的優先順序怎樣排列，沒有詳細說明。經過測試和繼續搜尋，得知優先順序如下排列：

1. 樣式表的元素選擇器選擇越精確，則其中的樣式優先順序越高。

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

所以上例中，#navigator的樣式優先順序大於ent_block的優先順序，即使ent_block是最新新增的，也不起作用。

2. 對於相同型別選擇器指定的樣式，在樣式表文件中，越靠後的優先順序越高。

注意，這裡是樣式表文件中越靠後的優先順序越高，而不是在元素class出現的順序。比如s2 在樣式表中出現在s1之後：

程式碼如下

s1 {

color: black;

}

s2 {

color: red;

}

而某個元素指定class時採用 class=”class2 class1″這種方式指定，此時雖然class1在元素中指定時排在class2的後面，但因為在樣式表文件中class1處於class2前面，此時仍然是class2的優先順序更高，color的屬性為red，而非black。

3. 如果要讓某個樣式的優先順序變高，可以使用!important來指定。

程式碼如下

s1 {

color: black !important;

}

s2 {

color: red;

}

解決方案：

此時class將使用black，而非red。

對於一開始遇到的問題，有兩種解決方案：

1. 將border從#navigator中拿出來，放到一個class k中，而k放到ent_block之前：

程式碼如下

#navigator {

height: 100%;

width: 200;

position: absolute;

left: 0;

}

k {

border: solid 2 #EEE;

}

ent_block {

border: solid 2 #AE0;

}

需要預設為#navigator元素指定class=”block”

2. 使用!important:

程式碼如下

#navigator {

height: 100%;

width: 200;

position: absolute;

left: 0;

border: solid 2 #EEE;

}

ent_block {

border: solid 2 #AE0 !important;

}

此時無需作任何其他改動即可生效。可見第二種方案更簡單一些。

補充一個例子

程式碼如下

<html>

<head>

<title></title>

<style type="text/css">

p { color: #00FF00 } /* 綠色 */

.a1 { color: #0000FF } /* 藍色 */

.a1 p { color: #00FFFF } /* 青色 */

.a2 { color: #FF0000 } /* 紅色 */

#a2 { color: #FFFF00 } /* 黃色 */

#a2 p { color: #FF00FF } /* 紫色 */

</style>

</head>

<body>

<p>我是綠色，內部樣式表優先於瀏覽器預設</p>

<p class="a2">我是紅色，類選擇器優先於內部樣式表</p>

<p class="a2" id="a2">我是黃色，ID選擇器優先於類選擇器</p>

<p class="a1">

<span>我是藍色，類選擇器優先於內部樣式表</span>

<p>我是青色，類派生選擇器優先於類選擇器</p>

<p class="a2">我還是青色，類派生選擇器優先於所有類選擇器</p>

<p id="a2">

<span>我是黃色，ID選擇器優先於類派生選擇器</span>

<p>我是紫色，ID派生選擇器優先於類派生選擇器</p>

<p class="a1">我還是紫色，ID派生選擇器優先於所有類選擇器</p>

<p class="a1" id="a1">我還是紫色，ID派生選擇器優先於所有ID選擇器</p>

<p class="a1" id="a1" style="color:#000000;">我是黑色，內聯樣式駕到閒雜人等退下</p>

</p>

</p>

</body>

</html>

標籤：CSS 覆蓋

相關文章