標籤:yellow 優先順序 檔案中 nbsp ref 並且 ima -- 參考
是因為瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。
下面是權值的規則:
標籤的權值為1,類選擇符的權值為10,ID選擇符的權值最高為100。例如下面的代碼:
下面,再來看一些例子吧?
#content div#main-content h2{
color:red;
}
#content #main-content>h2{
color:blue
}
body #content div[id="main-content"] h2{
color:green;
}
#main-content div.paragraph h2{
color:orange;
}
#main-content [class="paragraph"] h2{
color:yellow;
}
讓我們來一起算算六個樣式規則各自的權值的值:
- 第一個權值=2*100+2*1=202
- 第二個權值=2*100+1=201
- 第三個權值=1*100+1*10+3*1=113
- 第四個權值=1*100+1*10+2*1=112
- 第五個權值=1*100+1*10+1*1=111
注意:還有一個權值比較特殊--繼承也有權值但很低,有的文獻提出它只有0.1,所以可以理解為繼承的權值最低。
p{color:green;}
<p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>
最後 p 中的文本會設定為green,這個層疊很好理解,理解為後面的樣式會覆蓋前面的樣式。
所以前面的css樣式優先順序就不難理解了:
內聯樣式表(標籤內部)> 內建樣式表(當前檔案中)> 外部樣式表(外部檔案中)。
有些特殊的情況需要為某些樣式設定具有最高權值,怎麼辦?這時候我們可以使用!important來解決。
!important最高優先順序
如下代碼:
p{color:red!important;}
p{color:green;}
<p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>
這時 p 段落中的文本會顯示的red紅色。
注意:!important要寫在分號的前面
注意: 當網頁製作者不設定css樣式時,瀏覽器會按照自己的一套樣式來顯示網頁。並且使用者也可以在瀏覽器中設定自己習慣的樣式,比如有的使用者習慣把字型大小設定為大一些,使其查看網頁的文本更加清楚。這時注意樣式優先順序為:瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式,但記住!important優先順序樣式是個例外,權值高於使用者自己設定的樣式。
參考:
慕課網:http://www.imooc.com/code/2039
CSDN:http://blog.csdn.net/jane617_min/article/details/48370507
CSS3特殊性-權重值