大家都知道CSS的全稱叫做“層疊樣式表”,但估計很多人都不知道“層疊”二字的含義。其實,“層疊”指的就是樣式的覆蓋,當一個元素被運用上多種樣式,並且出現重名的樣式屬性時,瀏覽器必須從中選擇一個屬性值,這個過程就叫“層疊”。樣式覆蓋(這種叫法更大衆化些)遵循一定的規則,之前我對這個規則一直似懂非懂的,直到這幾天看了”CSS: The Missing Manual”,才豁然開朗。下面是我的一些學習筆記。
首先需要明確的是,很多情況都會導致一個元素被運用上多種樣式,樣式覆蓋的規則也需要根據不同的情況來定,具體規則如下。
規則一:由於繼承而發生樣式衝突時,最近祖先獲勝。
CSS的繼承機制使得元素可以從包含它的祖先元素中繼承樣式,考慮下面這種情況:
1
2
3
4
5
6
7
8
9
10
11
12
|
< 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元素的樣式,如:
1
|
strong
{ color : red ;} |
那麼根據規則二,strong中的文字最終顯示爲紅色。
規則三:直接指定的樣式發生衝突時,樣式權值高者獲勝。
樣式的權值取決於樣式的選擇器,權值定義如下表。
CSS選擇器 | 權值 |
---|---|
標籤選擇器 | 1 |
類選擇器 | 10 |
ID選擇器 | 100 |
內聯樣式 | 1000 |
僞元素(:first-child等) | 1 |
僞類(:link等) | 10 |
可以看到,內聯樣式的權值>>ID選擇器>>類選擇器>>標籤選擇器,除此以外,後代選擇器的權值爲每項權值之和,比如”#nav .current a”的權值爲100 + 10 + 1 = 111。
規則四:樣式權值相同時,後者獲勝。
考慮下面這種情況
1
|
< p class = "byline" >Written
by < a class = "email" href = "mailto:jean@cosmofarmer.
com" >Jean
Graine de Pomme</ a ></ p > |
1
2
|
.byline
a { color : red ;} p
.email { color : blue ;} |
“.byline a”與”p .email”都直接指定了上面的a元素,且權值都爲11,根據規則四,最終顯示藍色。
由於樣式表可以是外部的,也可以是內部的,規則四提醒我們要注意外部樣式表引入的順序(及<link>元素的順序),以及外部樣式表與內部樣式表的出現位置。一般來說,內部樣式表出現在所有外部樣式表的引入之後,一般是在</head>之前。
規則五:!important的樣式屬性不被覆蓋。
!important可以看做是萬不得已的時候,打破上述四個規則的”金手指”。如果你一定要採用某個樣式屬性,而不讓它被覆蓋的,可以在屬性值後加上!important,以規則四的例子爲例,”.byline a {color:red !important;}”可以強行使鏈接顯示紅色。大多數情況下都可以通過其他方式來控制樣式的覆蓋,不能濫用!important。