老調(diào)重彈的CSS優(yōu)先級(jí)
我要評論其次：我們能通過CSS為文檔設(shè)置豐富且易于修改的外觀，以減輕網(wǎng)頁制作者的工作負(fù)擔(dān)，從而減輕制作及后期維護(hù)的代價(jià)。
其實(shí)現(xiàn)在還來講CSS是什么，CSS有什么作用完全是多余的，相信從事網(wǎng)頁制作的朋友都已經(jīng)或多或少的接觸過了。
言歸正傳，我們開始進(jìn)入今天的話題：
一、什么是CSS優(yōu)先級(jí)？
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序。
二、CSS優(yōu)先級(jí)規(guī)則
既然樣式有優(yōu)先級(jí)，那么就會(huì)有一個(gè)規(guī)則來約定這個(gè)優(yōu)先級(jí)，而這個(gè)“規(guī)則”就是本次所需要講的重點(diǎn)。
樣式表中的特殊性描述了不同規(guī)則的相對權(quán)重，它的基本規(guī)則是：
1. 統(tǒng)計(jì)選擇符中的ID屬性個(gè)數(shù)。
2. 統(tǒng)計(jì)選擇符中的CLASS屬性個(gè)數(shù)。
3. 統(tǒng)計(jì)選擇符中的HTML標(biāo)記名個(gè)數(shù)。
最后，按正確的順序?qū)懗鋈齻€(gè)數(shù)字，不要加空格或逗號(hào)，得到一個(gè)三位數(shù)(css2.1是用4位數(shù)表示)。( 注意，你需要把數(shù)字轉(zhuǎn)換成一個(gè)以三個(gè)數(shù)字結(jié)尾的更大的數(shù))。相應(yīng)于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。
例如：
1. 每個(gè)ID選擇符(#someid)，加 0,1,0,0。
2. 每個(gè)class選擇符(.someclass)、每個(gè)屬性選擇符(形如[attr=value]等)、每個(gè)偽類(形如:hover等)加0,0,1,0。
3. 每個(gè)元素或偽元素(:firstchild)等，加0,0,0,1。
4. 其它選擇符包括全局選擇符*，加0,0,0,0。相當(dāng)于沒加，不過這也是一種specificity，后面會(huì)解釋。
三、特性分類的選擇符列表
以下是一個(gè)按特性分類的選擇符的列表：
|
選擇符 |
特性值 |
|
h1 {color:blue;} |
1 |
|
p em {color:purple;} |
2 |
|
.apple {color:red;} |
10 |
|
p.bright {color:yellow;} |
11 |
|
p.bright em.dark {color:brown;} |
22 |
|
#id316 {color:yellow} |
100 |
單從上面這個(gè)表來看，貌似不大好理解，下面再給出一張表：
|
選擇符 |
特性值 |
| h1 {color:blue;} | 1 |
| p em {color:purple;} | 1+1=2 |
| .apple {color:red;} | 10 |
| p.bright {color:yellow;} | 1+10=11 |
| p.bright em.dark {color:brown;} | 1+10+1+10=22 |
| #id316 {color:yellow} | 100 |
通過上面，就可以很簡單的看出，HTML標(biāo)記的權(quán)重是1,CLASS的權(quán)重是10,ID的權(quán)重是100，繼承的權(quán)重為0（后面會(huì)講到）。
按這些規(guī)則將數(shù)字符串逐位相加，就得到最終的權(quán)重，然后在比較取舍時(shí)按照從左到右的順序逐位比較。
優(yōu)先級(jí)問題其實(shí)就是一個(gè)沖突解決的問題，當(dāng)同一個(gè)元素（內(nèi)容）被CSS選擇符選中時(shí)，就要按照優(yōu)先級(jí)取舍不同的CSS規(guī)則，這其中涉及到的問題其實(shí)很多。
說到這里，我們不得不說一下CSS的繼承性。
四、CSS的繼承性
4.1 繼承的表現(xiàn)
繼承是CSS的一個(gè)主要特征，它是依賴于祖先-后代的關(guān)系的。繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素，還可以應(yīng)用于它的后代。例如一個(gè)BODY定義了的顏色值也會(huì)應(yīng)用到段落的文本中。
樣式定義：body {color:#f00;}
舉例代碼：<p>CSS<strong>繼承性</strong>的測試</p>
舉例效果： 
這段代碼的應(yīng)用結(jié)果是：“CSS繼承性的測試”這段話是紅顏色的，“繼承性”幾個(gè)字由于應(yīng)用了<strong>標(biāo)簽，所以是粗體。很顯然，這段文字都繼承了由body {color:#f00;}樣式定義的顏色。這也就是為什么說繼承性是CSS的一部分。
然而CSS繼承性的權(quán)重是非常低的，是比普通元素的權(quán)重還要低的0。
我們?nèi)砸陨厦娴呐e例代碼為例：在樣式定義中添加一條：strong {color:#000;}。
舉例效果： 
發(fā)現(xiàn)只需要給<strong>加個(gè)顏色值就能覆蓋掉它繼承自<body>的樣式顏色。由此可見：任何顯示申明的規(guī)則都可以覆蓋其繼承樣式。
4.2 繼承的局限性
繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。
有一些屬性不能被繼承，如：border, margin, padding, background等。
樣式定義：div {border:1px solid #000;}
舉例代碼：<div>我是<em>border</em>我是不能被繼承滴</div>
預(yù)期效果： 
實(shí)際效果： 
從上面的效果中，我們可以看出，border是不能被繼承的，還有一些其它的屬性也是如此，這里就不一一列舉。
五、附加說明
1. 文內(nèi)的樣式優(yōu)先級(jí)為1,0,0,0，所以始終高于外部定義。這里文內(nèi)樣式指形如<div style="color:red">blah</div>的樣式，而外部定義指經(jīng)由<link>或<style>卷標(biāo)定義的規(guī)則。
2. 有!important聲明的規(guī)則高于一切。
3. 如果!important聲明沖突，則比較優(yōu)先權(quán)。
4. 如果優(yōu)先權(quán)一樣，則按照在源碼中出現(xiàn)的順序決定，后來者居上。
5. 由繼承而得到的樣式?jīng)]有specificity的計(jì)算，它低于一切其它規(guī)則(比如全局選擇符*定義的規(guī)則)。
6. 關(guān)于經(jīng)由@import加載的外部樣式，由于@import必須出現(xiàn)在所有其它規(guī)則定義之前(如不是，則瀏覽器應(yīng)該忽略之)，所以按照后來居上原則，一般優(yōu)先權(quán)沖突時(shí)是占下風(fēng)的。
還需要說一下，IE是可以識(shí)別位置錯(cuò)誤的@import的，但無論@import在什么地方，它都認(rèn)為是位于所有其它規(guī)則定義之前的，這可能會(huì)引發(fā)一些誤會(huì)。
優(yōu)先權(quán)問題看起來簡單，但背后還是有非常復(fù)雜的機(jī)制，在實(shí)際應(yīng)用中需要多多留意。
六、練習(xí)
看完上面的文字后，來做幾道非常簡單的題目。（自己答完前，請不要先看各題給出的鏈接地址哦）
1. 如何讓使用兩個(gè)使用相同樣式名的元素具有不同的效果：css優(yōu)先級(jí)測試
固定效果： 
固定代碼： <div class="test">傳說中的測試</div>
<p class="test">傳說中的測試</p>
2. 如何讓<h3>始終為黑色，而<em>在不被<h3>包含的情況為紅色：css優(yōu)先級(jí)測試
固定效果： 
固定代碼： <h3>討論<em>CSS</em>優(yōu)先級(jí)</h3>
<p>討論<em>CSS</em>優(yōu)先級(jí)</p>
3. 如何寫一個(gè)外部樣式使得<h3 style="color:#000;"> 覆蓋我</h3>的顏色為紅色：css優(yōu)先級(jí)測試
4. 如何讓同時(shí)具有.a,.b樣式的元素只表現(xiàn).a的顏色樣式：css優(yōu)先級(jí)測試
固定代碼：<p class="a b">傳說中滴測試</p>
關(guān)于樣式優(yōu)先級(jí)，今天就先聊到這。
相關(guān)文章
- 作為一個(gè)Web開發(fā)者，掌握必要的前臺(tái)技術(shù)也是很重要的特別是CSS選擇器的優(yōu)先級(jí)問題，為了廣大web愛好者可以更好的解決問題，這里就CSS選擇器的優(yōu)先級(jí)問題做了一些總結(jié)2013-08-01
CSS控制樣式的三種方式(優(yōu)先級(jí)對比驗(yàn)證)
大家都知道，CSS的中文名叫做層疊樣式表，而CSS在控制樣式的時(shí)候，有三種引入方式,這里簡單介紹下CSS控制樣式的三種方式2013-07-22CSS優(yōu)先級(jí)的相關(guān)知識(shí)詳細(xì)介紹
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序，既然樣式有優(yōu)先級(jí)，那么就會(huì)有一個(gè)規(guī)則來約定這個(gè)優(yōu)先級(jí)，而這個(gè)“規(guī)則”就是本次所需要講的重點(diǎn)2013-04-22網(wǎng)頁css優(yōu)先級(jí)為您詳細(xì)解讀
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序，CSS是層疊樣式表（Cascading Style Sheets）的簡稱，我們能通過CSS為文檔設(shè)置豐富且易于修改的外觀2013-04-19- css樣式優(yōu)先級(jí)是按照樣式表中出現(xiàn)順序還是按照元素中class或者id值的聲明順序呢，這個(gè)問題貌似一直存在我們身邊卻一直無從選擇，接下來用實(shí)例為大家說明下，到底哪個(gè)高點(diǎn)，2013-03-14
CSS層疊樣式表之CSS解析機(jī)制的優(yōu)先級(jí)及樣式覆蓋問題探討
多重樣式（Multiple Styles）： 如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素，就是使多重樣式的情況.有個(gè)例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則2013-02-01CSS優(yōu)先級(jí)和!important與IE6的BUG討論及解決方案
本來我對他誰的ie6不支持!important也沒什么異議，可是正好在前幾天正好用個(gè)這個(gè)!important屬性解決了一個(gè)樣式優(yōu)先級(jí)的問題，而且是支持ie6的，這是為什么呢？到底ie6支不2013-01-23IE6下CSS多類選擇符優(yōu)先級(jí)不起作用的bug分析及解決方法
IE6，這個(gè)前端開發(fā)的夢魘總是在你不經(jīng)意的時(shí)候給你捅一刀,在ie6環(huán)境下CSS多類選擇符優(yōu)先級(jí)不起作用，多么的令人氣憤啊，經(jīng)過測試：IE6下這種類組合的優(yōu)先級(jí)不如單個(gè)類， 感2013-01-23- css樣式的優(yōu)先級(jí)是一個(gè)龐雜的知識(shí)點(diǎn)，我甚至覺得它的龐雜可以與“浮動(dòng)”以及“框模型”相提并論,今天就利用點(diǎn)時(shí)間把我所了解的寫下來，大家共同進(jìn)步2013-01-11
- css基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器、通用選擇器,本文將深入介紹css選擇器優(yōu)先級(jí),這會(huì)給正在解決優(yōu)先級(jí)問題的朋友，帶來些許幫助2012-12-04