CSS樣式定義的優先級順序總結
層疊優先級是:
瀏覽器缺省 < 外部樣式表 < 內部樣式表 < 內聯樣式
其中樣式表又有:
類選擇器 < 類派生選擇器 < ID選擇器 < ID派生選擇器
派生選擇器以前叫上下文選擇器，所以完整的層疊優先級是:
瀏覽器缺省 < 外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器 < 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器 < 內部樣式表 < 內部樣式表類選擇器 < 內部樣式表類派生選擇器 < 內部樣式表ID選擇器 < 內部樣式表ID派生選擇器 < 內聯樣式...共12個優先級
為了說明該問題，請參見下面的例子說明。
- <html>
- <head>
- <title></title>
- <style type="text/css">
- div { color: #00FF00 } /* 綠色 */
- .a1 { color: #0000FF } /* 藍色 */
- .a1 div { color: #00FFFF } /* 青色 */
- .a2 { color: #FF0000 } /* 紅色 */
- #a2 { color: #FFFF00 } /* 黃色 */
- #a2 div { color: #FF00FF } /* 紫色 */
- </style>
- </head>
- <body>
- <div>我是綠色，內部樣式表優先於瀏覽器缺省</div>
- <div class="a2">我是紅色，類選擇器優先於內部樣式表</div>
- <div class="a2" id="a2">我是黃色，ID選擇器優先於類選擇器</div>
- <div class="a1">
- <span>我是藍色，類選擇器優先於內部樣式表</span>
- <div>我是青色，類派生選擇器優先於類選擇器</div>
- <div class="a2">我還是青色，類派生選擇器優先於所有類選擇器</div>
- <div id="a2">
- <span>我是黃色，ID選擇器優先於類派生選擇器</span>
- <div>我是紫色，ID派生選擇器優先於類派生選擇器</div>
- <div class="a1">我還是紫色，ID派生選擇器優先於所有類選擇器</div>
- <div class="a1" id="a1">我還是紫色，ID派生選擇器優先於所有ID選擇器</div>
- <div class="a1" id="a1" style="color:#000000;">我是黑色，內聯樣式駕到閑雜人等退下</div>
- </div>
- </div>
- </body>
- </html>
運行后的效果圖：
另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個並以空格分開，其優先級順序為：
一個元素同時應用多個class，后定義的優先（即近者優先），加上!important者最優先！
- <!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>
運行后的效果圖：
