摘要：類選擇器具有更高的專用性，所以將戰(zhàn)勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。選擇器六明顯地輸給了了五，其專用性值為和它在鏈中少了一個元素選擇器。

當(dāng)有多個選擇器作用在一個元素上時，哪個規(guī)則最終會應(yīng)用到元素上？

其實(shí)這是通過層疊機(jī)制來控制的，這也和樣式繼承(元素從其父元素那里獲得屬性值)有關(guān)。

元素的最終樣式可以在多個地方定義，它們以復(fù)雜的形式相互影響。這些復(fù)雜的相互作用使CSS變得非常強(qiáng)大，但也使其非常難于調(diào)試和理解。

層疊

CSS 是 Cascading Style Sheets 的縮寫，這暗示層疊（cascade）的概念是很重要的。在最基本的層面上，它表明CSS規(guī)則的順序很重要，但它比那更復(fù)雜。什么選擇器在層疊中勝出取決于三個因素（這些都是按重量級順序排列的——前面的的一種會否決后一種）：

1. 重要性（Importance）
2. 專用性（Specificity）
3. 源代碼次序（Source order）

重要性

在CSS中，有一個特別的語法可以讓一條規(guī)則總是優(yōu)先于其他規(guī)則：!important。（常見于應(yīng)用于iconfont圖標(biāo)屬性后面）把它加在屬性值的后面可以使這條聲明有無比強(qiáng)大的力量。

讓我們看一下這個例子:

This is a paragraph.
One selector to rule them all!

#winning {
  background-color: red;
  border: 1px solid black;
}

.better {
  background-color: gray;
  border: none !important;
}

p {
  background-color: blue;
  color: white;
  padding: 5px;
}

這將生成以下：

讓我們一起來看看發(fā)生了什么。

1. 你可以看到第三條規(guī)則 color 和 padding被運(yùn)用了, 但 background-color沒有，為什么？實(shí)際上，這三種情況都應(yīng)該應(yīng)用，因?yàn)樵谠错樞蚝竺娴囊?guī)則通常會覆蓋較早的規(guī)則。

2. 然而, 在前面的規(guī)則被運(yùn)用了,因?yàn)?IDs/class 選擇器優(yōu)先于element選擇器。

3. 這兩個元素都有 class并帶有 better屬性, 但是第二個元素有 id 值為winning 。 因?yàn)楸绕餭lass而言id專用性更高(在一個頁面上id是唯一的, 但很多元素可以擁有相同的class — ID 選擇器在它們的目標(biāo)中是非常優(yōu)先的)，紅色背景色和1pixel的黑色邊框都應(yīng)應(yīng)用于第二元素，第一個元素獲得灰色背景色，沒有邊框，如類所指定。

4. 第二個元素獲得紅色背景色，但沒有邊框。為什么？因?yàn)?!important 在第二條規(guī)則中的聲明——在 border: none之后寫入它意味著盡管id具有更高的優(yōu)先性，該聲明也將優(yōu)先于前面規(guī)則中的邊界值聲明。

注意: 重載這個 !important 聲明的唯一方法是在后面的源碼或者是一個擁有更高特殊性的源碼中包含相同的 !important 特性的聲明。

知道 !important存在是很有用的，這樣當(dāng)你在別人的代碼中遇到它時，你就知道它是什么了。但是！我們建議你千萬不要使用它，除非你絕對必須使用它。您可能不得不使用它的一種情況是，當(dāng)您在CMS中工作時，您不能編輯核心的CSS模塊，并且您確實(shí)想要重寫一種不能以其他方式覆蓋的樣式。 但是，如果你能避免的話，不要使用它。由于 !important 改變了層疊正常工作的方式，因此調(diào)試CSS問題，尤其是在大型樣式表中，會變得非常困難。

要注意一個CSS聲明的重要性取決于它被指定在什么樣式表內(nèi)——用戶可以設(shè)置自定義樣式表覆蓋開發(fā)商的樣式，例如用戶可能有視力障礙，想設(shè)置字體大小對所有網(wǎng)頁的訪問是雙倍的正常大小，以便更容易閱讀。

相互沖突的聲明將按以下順序適用，后一種將覆蓋先前的聲明：

1. 在用戶代理樣式表的聲明 (例如：瀏覽器在沒有其他聲明的默認(rèn)樣式).
2. 用戶樣式表中的普通聲明（由用戶設(shè)置的自定義樣式）。
3. 作者樣式表中的普通聲明（這是我們設(shè)置的樣式，Web開發(fā)人員）。
4. 作者樣式表中的重要聲明
5. 用戶樣式表中的重要聲明

Web開發(fā)者的樣式表覆蓋用戶的樣式表是合理的，所以設(shè)計(jì)可以保持預(yù)期，但是有時候用戶有很好的理由來重寫web開發(fā)人員樣式，如上所述，這可以通過在用戶的規(guī)則中使用!important。

專用性

專用性基本上是衡量選擇器的具體程度的一種方法——它能匹配多少元素。如上面所示的示例所示，元素選擇器具有很低的專用性。類選擇器具有更高的專用性，所以將戰(zhàn)勝元素選擇器。ID選擇器有甚至更高的專用性, 所以將戰(zhàn)勝類選擇器. 戰(zhàn)勝ID選擇器的唯一方法是使用 !important。

一個選擇器具有的專用性的量是用四種不同的值（或組件）來衡量的，它們可以被認(rèn)為是千位，百位，十位和個位——在四個列中的四個簡單數(shù)字：

1. 千位：如果聲明是在style 屬性中該列加1分（這樣的聲明沒有選擇器，所以它們的專用性總是1000。）否則為0。
2. 百位：在整個選擇器中每包含一個ID選擇器就在該列中加1分。
3. 十位：在整個選擇器中每包含一個類選擇器、屬性選擇器、或者偽類就在該列中加1分。
4. 個位：在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加1分。

注意: 通用選擇器 (*), 復(fù)合選擇器 (+, >, ~, ) 和否定偽類 (:not) 在專用性中無影響。

下表顯示了幾個示例。試著通過這些，并確保你理解他們?yōu)槭裁淳哂形覀兘o予他們的專用性。