從CSS代碼存放位置看權重優先級:內嵌樣式 > 內部樣式表 > 外聯樣式表。其實這個基本可以忽視之,大部分情況下CSS代碼都是使用外聯樣式表。
從樣式選擇器看權重優先級:important > 內嵌樣式 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符。
- important的權重為1,0,0,0
- ID的權重為0,1,0,0
- 類的權重為0,0,1,0
- 標簽的權重為0,0,0,1
- 偽類的權重為0,0,1,0
- 屬性的權重為0,0,1,0
- 偽對象的權重為0,0,0,1
- 通配符的權重為0,0,0,0
實例:
<html> <head> <style type="text/css"> #left{color:black!important;} /*1,1,0,0*/ #container #left{color:red;} /*0,2,0,0*/ #left{color:green!important;} /*1,1,0,0*/ .container #left{color:blue;} /*0,1,1,0*/ </style> </head> <body> <div class="container" id="container"> <span id="left">這到底是什么顏色啊?</span> </div> </body> </html>
2個#left的權重都是1,1,0,0 這個時候就采用最后定義原則,所以最后輸出的姿態是綠色的。