規則一:由于繼承而發生樣式沖突時,最近祖先獲勝。
CSS的繼承機制使得元素可以從包含它的祖先元素中繼承樣式,考慮下面這種情況:
<html><head><title>rule 1</title><style>body {color:black;}p {color:blue;}</style></head><body><p>welcome to <strong>gaodayue的網絡日志</strong></p></body></html>
?strong分別從body和p中繼承了color屬性,但是由于p在繼承樹上離strong更近,因此strong中的文字最終繼承p的藍色。
?
規則二:繼承的樣式和直接指定的樣式沖突時,直接指定的樣式獲勝。
在上面的例子中,假如還指定了strong元素的樣式,如:
strong {color:red;}
那么根據規則二,strong中的文字最終顯示為紅色。
規則三:直接指定的樣式發生沖突時,樣式權值高者獲勝。
樣式的權值取決于樣式的選擇器,權值定義如下表:
css選擇器 | 權值 |
---|---|
?標簽選擇器 | ?1 |
?類選擇器 | ?10 |
?ID選擇器 | ?100 |
?內斂樣式 | ?1000 |
?偽元素(:first-child等) | ?1 |
?偽類(:link) | ?10 |
可以看到,內聯樣式的權值>>ID選擇器>>類選擇器>>標簽選擇器,除此以外,后代選擇器的權值為每項權值之和,比如”#nav .current a”的權值為100 + 10 + 1 = 111。
規則四:樣式權值相同時,后者獲勝。
<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer. com">Jean Graine de Pomme</a></p>.byline a {color:red;}p .email {color:blue;}
“.byline a”與”p .email”都直接指定了上面的a元素,且權值都為11,根據規則四,最終顯示藍色。
規則五:!important的樣式屬性不被覆蓋。
!important可以看做是萬不得已的時候,打破上述四個規則的”金手指”。如果你一定要采用某個樣式屬性,而不讓它被覆蓋的,可以在屬性值后加上!important,以規則四的例子為例,”.byline a {color:red !important;}”可以強行使鏈接顯示紅色。大多數情況下都可以通過其他方式來控制樣式的覆蓋,不能濫用!important。