新手學(xué)習(xí)css優(yōu)先級(jí)

css不是一種程序語(yǔ)言，而是一種描述語(yǔ)言。因此，可以說(shuō)，css理解起來(lái)是非常容易的，大部分人通過(guò)簡(jiǎn)單的學(xué)習(xí)就可以懂得如何寫(xiě)css代碼來(lái)定義網(wǎng)頁(yè)的樣式。但是，大部分人同樣也會(huì)在寫(xiě)css的過(guò)程中產(chǎn)生很多困惑，比如為什么自己寫(xiě)的某段css沒(méi)有生效，或者呈現(xiàn)出的樣式和預(yù)計(jì)的不同，但又不知道要如何解決。

造成這些問(wèn)題的主要因素，是css優(yōu)先級(jí)。css優(yōu)先級(jí)是css中最難理解的概念之一，但對(duì)于掌握css來(lái)說(shuō)非常重要。理解css優(yōu)先級(jí)，不僅有利于快速解決樣式問(wèn)題，而且能在布局層面，幫助我們寫(xiě)出更明晰，更合理的css代碼。

什么是css優(yōu)先級(jí)

css的組成單元是樣式規(guī)則（CSS Rule），單條樣式規(guī)則的形式如下：

其中，選擇符（Selector）決定了后邊所寫(xiě)的屬性定義會(huì)作用到哪些元素，因此稱為選擇符。

css有一個(gè)核心特性，當(dāng)多條樣式規(guī)則中的同一個(gè)屬性（比如padding）作用到了同一個(gè)元素，這些樣式之間就會(huì)發(fā)生覆蓋：

圖中由前端調(diào)試工具所顯示的，被劃掉的css樣式，不會(huì)呈現(xiàn)在這里選中的網(wǎng)頁(yè)元素上，因?yàn)樗鼈儽桓采w掉了。css優(yōu)先級(jí)，就是指在這種情況下，得出“應(yīng)該由哪一條樣式規(guī)則的內(nèi)容覆蓋掉其他的”這個(gè)結(jié)論的過(guò)程中所遵循的原則。更一般的表述是，優(yōu)先級(jí)高的css樣式，將覆蓋優(yōu)先級(jí)低的css樣式，成為最終網(wǎng)頁(yè)元素的實(shí)際樣式。

注意，前端調(diào)試工具顯示的，”被劃掉“的css樣式，并不是說(shuō)一定是完全覆蓋。css中的一些組合屬性（比如margin，可以拆分為margin-top、margin-right、margin-bottom、margin-left），在這種樣式覆蓋中遵循的是局部覆蓋的原則，即使在前端調(diào)試工具中它們看起來(lái)“整個(gè)都被劃掉了”：

css優(yōu)先級(jí)的影響因素

css優(yōu)先級(jí)的影響因素要考慮三部分內(nèi)容，css選擇符權(quán)重、!important標(biāo)識(shí)符、屬性繼承。很多文章都闡述過(guò)css選擇符權(quán)重這一點(diǎn)，但后面兩部分卻很少被提及。本文會(huì)依照這三部分做詳細(xì)的說(shuō)明。

屬性繼承

css中一部分屬性是可繼承屬性，比如文本顏色color。css優(yōu)先級(jí)的討論，首先應(yīng)認(rèn)清css中的屬性繼承所帶來(lái)的影響。由于存在可繼承屬性，一個(gè)網(wǎng)頁(yè)元素的樣式來(lái)源可以分為兩類：

• 由css選擇符直接定義到元素本身的樣式。
• css選擇符未作用到，但繼承自父級(jí)元素的樣式。

定義到元素本身的樣式，包括瀏覽器默認(rèn)樣式，一定比繼承得到的樣式優(yōu)先級(jí)高。因此，可以這樣認(rèn)定：繼承得到的樣式的優(yōu)先級(jí)是最低的，在任何時(shí)候，只要元素本身有同屬性的樣式定義，就可以覆蓋掉繼承值：

而且，繼承樣式是最低優(yōu)先級(jí)這一點(diǎn)，是無(wú)視繼承樣式所在的樣式規(guī)則的內(nèi)容的。這就是說(shuō)，繼承樣式所在的樣式規(guī)則，即使其選擇符的權(quán)重比元素本身樣式的選擇符的權(quán)重更高（本文后文會(huì)介紹選擇符權(quán)重~ :) ），甚至繼承樣式被寫(xiě)了!important，繼承樣式會(huì)被元素本身樣式覆蓋這一點(diǎn)仍然成立。

舉例來(lái)說(shuō)明。下面這段html：

div id="container">
 p class="note_text">acgtofe - 動(dòng)漫與前端技術(shù)的綜合博客/p>
/div>

對(duì)應(yīng)的css：

#container{color:darkblue;}
.note_text{color:darkorange;}

這個(gè)部分在所有瀏覽器中的效果都是：

再為原來(lái)的css增加!important：

#container{color:darkblue !important;}
.note_text{color:darkorange;}

然后，會(huì)發(fā)現(xiàn)所有瀏覽器中的效果都不變：

當(dāng)一個(gè)元素有多個(gè)父級(jí)元素都定義了繼承樣式，這些繼承樣式之間的優(yōu)先級(jí)又是怎樣的？這時(shí)候，遵循的優(yōu)先級(jí)原則可以叫做就近原則，也就是說(shuō)，在存在多個(gè)繼承樣式時(shí)，層級(jí)關(guān)系距離當(dāng)前元素最近的父級(jí)元素的繼承樣式，具有相對(duì)最高的優(yōu)先級(jí)。同樣，這時(shí)候也是無(wú)視樣式規(guī)則內(nèi)容的。

就近原則其實(shí)不算是新的結(jié)論，想一下，如果把每一個(gè)父級(jí)元素都作為當(dāng)前元素，然后按照前邊的“元素本身樣式大于繼承樣式”的原則推理一遍，就可以明白，離得最近的父級(jí)元素的繼承樣式優(yōu)先級(jí)最高，是很合理的。

css選擇符權(quán)重

css選擇符權(quán)重是css優(yōu)先級(jí)的核心概念。但在考慮css選擇符權(quán)重前，請(qǐng)記住，這條優(yōu)先級(jí)原則涉及的樣式都是指定義在元素本身的樣式。

每一條樣式規(guī)則的選擇符，除了決定這條樣式規(guī)則會(huì)作用到哪些元素之外，選擇符也是瀏覽器判斷css規(guī)則優(yōu)先級(jí)的參考信息。css選擇符權(quán)重不是簡(jiǎn)單的內(nèi)容，但卻可以用簡(jiǎn)單而直觀的方法做闡述。

css選擇符權(quán)重是一個(gè)數(shù)字游戲，比的就是誰(shuí)的計(jì)算值更大。權(quán)重計(jì)算值大的樣式規(guī)則將有更高的優(yōu)先級(jí)。你可以想象為龍珠里的戰(zhàn)斗力測(cè)量，在這場(chǎng)權(quán)重戰(zhàn)爭(zhēng)（Specificity Wars，這也是早期的一篇闡述css優(yōu)先級(jí)的文章中用到的詞）中，戰(zhàn)斗力最強(qiáng)的將取得勝利。

戰(zhàn)斗力的測(cè)量方法是統(tǒng)計(jì)選擇符中的不同組成元素的個(gè)數(shù)，并以 (a,b,c,d) 這種形式來(lái)判斷。其中，abcd分別代表了不同類別的選擇符組成元素，且戰(zhàn)斗力分別在不同的數(shù)量級(jí)，a最強(qiáng)，d最弱。從弱到強(qiáng)，這4個(gè)字母分別代表的類別是：

• 元素選擇符（Element），偽元素選擇符（Pseudo Element） d = 1 – (0,0,0,1)
• 類選擇符 （Class），偽類選擇符（Pseudo class），屬性選擇符（Attribute） c = 1 – (0,0,1,0)
• Id選擇符 b = 1 – (0,1,0,0)
• 內(nèi)聯(lián)樣式（Inline style） a = 1 – (1,0,0,0)

這里的偽元素和偽類做一下補(bǔ)充說(shuō)明。偽元素選擇符，指的是樣式作用到的元素不是html結(jié)構(gòu)中的實(shí)際元素，即不是真正的dom元素。目前只有:before，:after，:first-line，:first-letter和::selection這5個(gè)偽元素選擇符。偽類選擇符，則是指除前邊的這部分選擇符之外，在css中加入冒號(hào):的，用于實(shí)現(xiàn)動(dòng)態(tài)效果與智能控制的選擇符，比如:hover，:nth-of-type(n)。從css3開(kāi)始，通過(guò)區(qū)別使用雙冒號(hào)::來(lái)表示偽元素，單冒號(hào):來(lái)表示偽類，但為了和以前的瀏覽器兼容，:after這種誕生于css2的偽類選擇符仍然允許使用單冒號(hào)的寫(xiě)法。

現(xiàn)在，可以找一些css選擇符計(jì)算一下了：

看過(guò)這些例子后，請(qǐng)理解為，簡(jiǎn)單的分類計(jì)數(shù)，正是css中的戰(zhàn)斗力測(cè)量方法。(a,b,c,d) 這種形式中，abcd分別是不同的數(shù)量級(jí)，a>b>c>d，和數(shù)字的大小比較方法相同，從高位開(kāi)始，如果高位數(shù)字相同，則取低一位數(shù)字比較，以此類推。選擇符權(quán)重計(jì)算值最大的樣式規(guī)則中的屬性，覆蓋其他的樣式規(guī)則中的同名屬性。

如果你覺(jué)得自己計(jì)算麻煩，請(qǐng)到Specificity Calculator，這是一個(gè)非常棒的計(jì)算器。

(a,b,c,d) 中，a代表的內(nèi)聯(lián)樣式實(shí)際是存在于html代碼中，只能取值為0或1，所以和其他的較為不同。后邊的bcd雖說(shuō)是不同的數(shù)量級(jí)，但詳細(xì)說(shuō)來(lái)有多大差距呢？請(qǐng)看下面這一段Firefox瀏覽器源代碼：

可以看出，class和id對(duì)應(yīng)的十六進(jìn)制數(shù)值之間隔了2位，所以，在Firefox中，要256（162）個(gè)class才相當(dāng)于1個(gè)id。在不同瀏覽器中，這種層級(jí)差距，可能有所不同。在寫(xiě)本文的時(shí)間點(diǎn)，Opera和Chrome中用256+的class也不能大于id的權(quán)重。不過(guò)，這些細(xì)節(jié)信息并不重要，你在實(shí)際使用中不可能用到這個(gè)數(shù)量的選擇符。所以，應(yīng)認(rèn)為前面所述的權(quán)重計(jì)算方法是可靠的。

如果權(quán)重計(jì)算值相同，則進(jìn)入后一個(gè)環(huán)節(jié)：樣式定義順序。

樣式定義順序

權(quán)重計(jì)算值相同的樣式規(guī)則，定義順序靠后的優(yōu)先級(jí)高。這里的定義順序，包含了所有的靜態(tài)樣式（不包括由javascript創(chuàng)建style>或link>元素引入的樣式）定義的可能情況。如直接寫(xiě)在html的style>標(biāo)簽內(nèi)的樣式規(guī)則，通過(guò)link>引入的css文件，以及@import引入的css文件。

請(qǐng)記住，只有權(quán)重計(jì)算值相同的時(shí)候，你才需要考慮樣式定義順序。

!important標(biāo)識(shí)符

!important是可以寫(xiě)在樣式規(guī)則中的某一屬性定義值后的標(biāo)識(shí)符，用于提升某一屬性的樣式定義的優(yōu)先級(jí)。不同于決定整條樣式規(guī)則優(yōu)先級(jí)的css選擇符權(quán)重，!important只影響自己所在位置的單一屬性。!important在優(yōu)先級(jí)原則中，可以理解為前文的(a,b,c,d)結(jié)構(gòu)中的，比a更高位的標(biāo)識(shí)：

然后，你完全再按照前文的css選擇符權(quán)重的比較方法，就可以得出在這種情況下的css優(yōu)先級(jí)了。具體說(shuō)的話，可以表述如下：

• 寫(xiě)有!important標(biāo)識(shí)符的樣式，其優(yōu)先級(jí)一定大于沒(méi)有該標(biāo)識(shí)符的樣式。
• 在都寫(xiě)有!important標(biāo)識(shí)符的樣式之間，再按照一般的css選擇符權(quán)重的優(yōu)先級(jí)原則做判斷。

css優(yōu)先級(jí)的瀏覽器兼容性

css優(yōu)先級(jí)雖然是不簡(jiǎn)單的內(nèi)容，但幸運(yùn)的是，除IE6和IE7存在少量?jī)?yōu)先級(jí)的bug（詳見(jiàn)IE Specificity bugs）外，幾乎所有瀏覽器都很一致地遵循css優(yōu)先級(jí)原則。所以，css優(yōu)先級(jí)是很通用的概念，可以在各種情況下應(yīng)用而不必?fù)?dān)心兼容性。

結(jié)語(yǔ)

css優(yōu)先級(jí)的概念在本文就介紹到此。本文所闡述的仍有不夠全面的地方，如果你碰到一些新的問(wèn)題，歡迎來(lái)這里討論。在實(shí)際應(yīng)用中，理解css優(yōu)先級(jí)并不是讓我們?nèi)ミ@樣分析每一條樣式規(guī)則，而只是讓我們有一個(gè)更清醒的狀態(tài)，知道如何去布局和控制自己所寫(xiě)的css。所謂“知己知彼，百戰(zhàn)不殆”，也是這樣的道理。

css全名是層疊樣式表（Cascading Style Sheet），css優(yōu)先級(jí)正是這種“層疊”中所遵循的原則，由此也可以看出css優(yōu)先級(jí)的重要性。最后，以一個(gè)自制的圖來(lái)結(jié)尾：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。