大家都知道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。