CSS中樣式覆蓋優(yōu)先順序詳解
層疊優(yōu)先級是:
瀏覽器缺省 < 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式
其中樣式表又有:
類選擇器 < 類派生選擇器 < ID選擇器 < ID派生選擇器
派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級是:
瀏覽器缺省 < 外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器 < 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器 < 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式...共12個優(yōu)先級
有時候在寫CSS的過程中，某些限制總是不起作用，這就涉及了CSS樣式覆蓋的問題，如下
| 代碼如下 | |
| #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; } |
|
查找一些教材中(w3schools等)，只說css的順序是“元素上的style” > “文件頭上的style元素” >“外部樣式文件”，但對于樣式文件中的多個相同樣式的優(yōu)先級怎樣排列，沒有詳細說明。經(jīng)過測試和繼續(xù)搜索，得知優(yōu)先級如下排列：
1. 樣式表的元素選擇器選擇越精確，則其中的樣式優(yōu)先級越高。
id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式
所以上例中，#navigator的樣式優(yōu)先級大于.current_block的優(yōu)先級，即使.current_block是最新添加的，也不起作用。
2. 對于相同類型選擇器指定的樣式，在樣式表文件中，越靠后的優(yōu)先級越高。
注意，這里是樣式表文件中越靠后的優(yōu)先級越高，而不是在元素class出現(xiàn)的順序。比如.class2 在樣式表中出現(xiàn)在.class1之后：
| 代碼如下 | |
| .class1 { color: black; } .class2 { color: red; } |
|
而某個元素指定class時采用 class=”class2 class1″這種方式指定，此時雖然class1在元素中指定時排在class2的后面，但因為在樣式表文件中class1處于class2前面，此時仍然是class2的優(yōu)先級更高，color的屬性為red，而非black。
3. 如果要讓某個樣式的優(yōu)先級變高，可以使用!important來指定。
| 代碼如下 | |
| .class1 { color: black !important; } .class2 { color: red; } |
|
解決方案：
此時class將使用black，而非red。
對于一開始遇到的問題，有兩種解決方案：
1. 將border從#navigator中拿出來，放到一個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; } |
|
需要默認為#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; } |
|
此時無需作任何其他改動即可生效。可見第二種方案更簡單一些。
補充一個例子
| 代碼如下 | |
|
<html> |
|
效果
另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個并以空格分開，其優(yōu)先級順序為：
一個元素同時應(yīng)用多個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"> <body> |
|
運行后的效果圖：
本文地址：http://m.likemindfilms.com/tutorial/wd2216.html
