大家都知道CSS的全稱叫做層疊樣式表，但估計(jì)很多人都不知道層疊二字的含義鲸阔。其實(shí)偷霉，層疊指的就是樣式的覆蓋迄委，當(dāng)一個(gè)元素被運(yùn)用上多種樣式，并且出現(xiàn)重名的樣式屬性時(shí)类少，瀏覽器必須從中選擇一個(gè)屬性值叙身，這個(gè)過(guò)程就叫層疊。樣式覆蓋（這種叫法更大眾化些）遵循一定的規(guī)則硫狞，之前我對(duì)這個(gè)規(guī)則一直似懂非懂的信轿，直到這幾天看了 CSS: The Missing Manual，才豁然開(kāi)朗残吩。下面是我的一些學(xué)習(xí)筆記财忽。
首先需要明確的是，很多情況都會(huì)導(dǎo)致一個(gè)元素被運(yùn)用上多種樣式泣侮，樣式覆蓋的規(guī)則也需要根據(jù)不同的情況來(lái)定即彪，具體規(guī)則如下。
規(guī)則一：由于繼承而發(fā)生樣式?jīng)_突時(shí)活尊，最近祖先獲勝隶校。
CSS的繼承機(jī)制使得元素可以從包含它的祖先元素中繼承樣式，考慮下面這種情況：
<html>
<head>
<title>rule 1</title>
<style>
body { color: black; }
p { color: blue; }
</style>
</head>
<body>
<p>welcome to <strong>gaodayue的網(wǎng)絡(luò)日志</strong></p>
</body>
</html>
strong分別從body和p中繼承了color屬性蛹锰，但是由于p在繼承樹(shù)上離strong更近深胳，因此strong中的文字最終繼承p的藍(lán)色。
規(guī)則二：繼承的樣式和直接指定的樣式?jīng)_突時(shí)铜犬，直接指定的樣式獲勝舞终。
在上面的例子中，假如還指定了strong元素的樣式翎苫，如：
strong { color: red; }
那么根據(jù)規(guī)則二权埠，strong中的文字最終顯示為紅色。
規(guī)則三：直接指定的樣式發(fā)生沖突時(shí)煎谍，樣式權(quán)值高者獲勝攘蔽。
樣式的權(quán)值取決于樣式的選擇器，權(quán)值定義如下表呐粘。
| CSS選擇器 | 權(quán)值 |
|---|---|
| 標(biāo)簽選擇器 | 1 |
| 類選擇器 | 10 |
| ID選擇器 | 100 |
| 內(nèi)聯(lián)樣式 | 1000 |
| 偽元素(:first-child等) | 1 |
| 偽類(:link等) | 10 |
可以看到满俗，內(nèi)聯(lián)樣式的權(quán)值 > ID選擇器 > 類選擇器 > 標(biāo)簽選擇器，除此以外作岖，后代選擇器的權(quán)值為每項(xiàng)權(quán)值之和唆垃，比如#nav .current a的權(quán)值為100 + 10 + 1 = 111。
規(guī)則四：樣式權(quán)值相同時(shí)痘儡，后者獲勝辕万。
考慮下面這種情況
<p class="byline">
Written by
<a class="email" href="mailto:jean@cosmofarmer. com">
Jean Graine de Pomme
</a>
</p>
<style>
.byline a { color: red; }
p .email { color: blue; }
</style>
.byline a與p .email都直接指定了上面的a元素，且權(quán)值都為11，根據(jù) 規(guī)則四渐尿，最終顯示藍(lán)色醉途。
由于樣式表可以是外部的，也可以是內(nèi)部的砖茸，規(guī)則四提醒我們要注意外部樣式表引入的順序（及<link>元素的順序）隘擎，以及外部樣式表與內(nèi)部樣式表的出現(xiàn)位置。一般來(lái)說(shuō)凉夯，內(nèi)部樣式表出現(xiàn)在所有外部樣式表的引入之后货葬，一般是在</head>之前。
`` ##規(guī)則五：!important的樣式屬性不被覆蓋劲够。
!important可以看做是萬(wàn)不得已的時(shí)候震桶，打破上述四個(gè)規(guī)則的”金手指”。如果你一定要采用某個(gè)樣式屬性再沧，而不讓它被覆蓋的尼夺，可以在屬性值后加上!important，以規(guī)則四的例子為例炒瘸，”.byline a {color:red !important;}可以強(qiáng)行使鏈接顯示紅色淤堵。大多數(shù)情況下都可以通過(guò)其他方式來(lái)控制樣式的覆蓋，不能濫用!important顷扩。
轉(zhuǎn)自：CSS樣式覆蓋規(guī)則 - http://blog.csdn.net/wl110231/article/details/7642652
