1. 同一元素引用了多個樣式時，排在后面的樣式屬性的優先級高
例如，下面的 div，同時引用了 [.default] 和 [.user] 中的樣式，其中 [.user] 樣式中的 width 屬性會替換 [.default] 樣式中的 width 屬性。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> .default{ width: 100px; /* 定義 width 屬性 */ height: 100px; background-color: #B6E0AE; margin: -50px 0 0 -50px; position: absolute; top: 50%; left: 50%; } .user{ width: 150px; /* 這里 width 的值替換了前面 width 的值 */ } </style> </head> <body> <div class="default user"></div> </body> </html>
2. 樣式選擇器的類型不同時，優先級順序為：id 選擇器 > class 選擇器 > 標簽選擇器
例如，下面的 div 即獲取 id 選擇器對應的樣式，又獲取 class 選擇器對應的樣式，其中
id 選擇器 [#mydiv] 的樣式屬性（width），優先於 class 選擇器 [.user] 中的樣式屬性（width）；
class 選擇器 [.user] 中的樣式屬性（background-color），優先於標簽選擇器 [div] 中的樣式屬性 （background-color）。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #mydiv{ width: 100px; height: 100px; margin: -50px 0 0 -50px; position: absolute; top: 50%; left: 50%; } .user{ width: 500px; /* #mydiv 中已定義 width 屬性，這里的 width 無效 */ background-color: #B6E0AE; } div{ background-color: #000000; /* .user中已定義 background-color 屬性，這里的 background-color 無效 */ } </style> </head> <body> <div id="mydiv" class="user"></div> </body> </html>
3. 標簽之間存在層級包含關系時，后代元素會繼承祖先元素的樣式。如果后代元素定義了與祖先元素相同的樣式，則祖先元素的相同的樣式屬性會被覆蓋。繼承的樣式的優先級比較低，至少比標簽選擇器的優先級低
例如，下面 id = "child" 的子 div，部分樣式繼承自 id = "parent" 的父 div，而其新定義的樣式屬性又會覆蓋父元素的樣式屬性。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #parent{ width: 100px; height: 100px; background-color: #B6E0AE; margin: -50px 0 0 -50px; position: absolute; top: 50%; left: 50%; } #child{ /* 繼承了父元素的 width 等屬性 */ height: 60px; /* 這里的 height 覆蓋了父元素的 height 屬性 */ background-color: #A7CCEF; /* 這里的 background-color 屬性覆蓋了父元素的 background-color 屬性 */ } </style> </head> <body> <div id="parent"> <div id="child" style="font-size:12px;">子元素</div> </div> </body> </html>
4. 帶有 !important 標記的樣式屬性的優先級最高
例如，下面的 div 的樣式屬性中，帶有 !important 標記的樣式屬性（width）會替換其他的（width）。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #parent{ width: 100px; height: 100px; background-color: #B6E0AE; margin: -50px 0 0 -50px; position: absolute; top: 50%; left: 50%; } #child{ /* 繼承了父元素的 width 等屬性 */ height: 60px; /* 這里的 height 覆蓋了父元素的 height 屬性 */ background-color: #A7CCEF; /* 這里的 background-color 屬性覆蓋了父元素的 background-color 屬性 */ } div{ width: 150px !important; /* 此時的 width 屬性優先級最高，不會被其他的 width 屬性覆蓋 */ } </style> </head> <body> <div id="parent"> <div id="child" style="font-size:12px;">子元素</div> </div> </body> </html>
5. 樣式表的來源不同時，優先級順序為：內聯樣式 > 內部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認樣式
例如，下面的 div 的樣式有多個來源，其中內聯樣式 font-size 的優先級最高，外部樣式中的 width 屬性，優先級比內部樣式中的 width 屬性的優先級要低。
/* main.css 文件 */
#parent { width: 300px; }
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link type="text/css" rel="stylesheet" href="main.css" /> <style type="text/css"> #parent{ width: 100px; /* 這里的 width 屬性替換了 main.css 文件中定義的 width 屬性 */ height: 100px; background-color: #B6E0AE; margin: -50px 0 0 -50px; position: absolute; top: 50%; left: 50%; } #child{ height: 60px; /* 覆蓋父元素的 height 屬性 */ background-color: #A7CCEF; font-size: 50px; } </style> </head> <body> <div id="parent"> <!--內聯樣式 font-size 優先級比 <style></style> 中的 font-size 優先級高 --> <!--chrome 瀏覽器默認的 font-size 至少是 12px，即使這里設置為小於 12px，瀏覽器還是顯示 12px--> <div id="child" style="font-size:20px;">子元素</div> </div> </body> </html>
附：如何用 jQuery 選擇器來選擇 class 中有多個值的元素，如 class="a b c" 的元素？
下面 div 的 class 屬性中包含多個值，可以按以下方式來查找這樣的 div：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function myClick() { //按屬性選擇器的方式來選擇 $("[class='ancestor parent child']").css("color", "red"); //直接列出各個類名來選擇（順序可以互換） $(".ancestor.parent.child").css("color", "red"); //打亂順序后，也可以找到同樣的元素 $(".child.parent.ancestor").css("color", "red"); //注意：選擇器中間不能隨便加空格（空格后面的元素表示后代元素），如： $(".ancestor .parent .child").css("color", "red"); //可以找到 div $(".child .parent .ancestor").css("color", "red"); //找不到任何元素 //依次過濾來選擇 $(".ancestor.parent").filter(".child").css("color", "red"); $(".ancestor").filter(".child").css("color", "red"); //也可以用 find() 來查找滿足條件的 所有的后代元素 $(".ancestor.parent").find(".child").css("color", "red");
$(".ancestor").find(".child").css("color", "red"); } </script> </head> <body> <form action="http://www.bing.com/search"> <div> <div class="ancestor parent child"> <div class="child">test0</div> <span class="child">test1</span> </div> <div class="ancestor">test2</div> <div class="parent">test3</div> <div class="child">test4</div> <input type="button" onclick="myClick();" value="點擊" /> </div> </form> </body> </html>
注：《HTML5程序設計》這本書上有更詳細的介紹