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

• 重要性（importance）

• 特殊性（Specificity）

• 源代碼次序（Source order）

重要性

!important

在CSS中，有一個(gè)特別的語(yǔ)法可以讓一條規(guī)則總是優(yōu)先于其他規(guī)則：!important。把它加在屬性值的后面可以使這條聲明有無(wú)比強(qiáng)大的力量。

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

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

樣式表來(lái)源

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

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

• 在用戶(hù)代理樣式表的聲明 (例如：瀏覽器在沒(méi)有其他聲明的默認(rèn)樣式).

• 用戶(hù)樣式表中的普通聲明（由用戶(hù)設(shè)置的自定義樣式）。

• 作者樣式表中的普通聲明（這是我們?cè)O(shè)置的樣式，Web開(kāi)發(fā)人員）。

• 作者樣式表中的重要聲明

• 用戶(hù)樣式表中的重要聲明(優(yōu)先級(jí)最高)

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

特殊性

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

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

• 千位：如果聲明是在 style 屬性中該列加1分（這樣的聲明沒(méi)有選擇器，所以它們的專(zhuān)用性總是1000。）否則為0。

• 百位：在整個(gè)選擇器中每包含一個(gè) ID選擇器就 在該列中加1分。

• 十位：在整個(gè)選擇器中每包含一個(gè) 類(lèi)選擇器、屬性選擇器、或者 偽類(lèi) 就在該列中加1分。

• 個(gè)位：在整個(gè)選擇器中每包含一個(gè) 元素選擇器 或 偽元素 就在該列中加1分。

注意: 通用選擇器 (*), 復(fù)合選擇器 (+, >, ~, ' ') 和否定偽類(lèi) (:not) 在專(zhuān)用性中無(wú)影響。

示例

選擇器千位百位十位個(gè)位合計(jì)值h100010001#important01000100h1 + p::first-letter00030003li > a[href*="zh-CN"] > .inline-warning00220022#important p > p > a:hover, 在一個(gè)元素的 <style> 屬性里11131113

注意: 如果多個(gè)選擇器具有相同的重要性和專(zhuān)用性，則選擇哪一個(gè)選擇器取決于 Source order（源代碼次序）。

源代碼次序（Source order）

如果多個(gè)相互競(jìng)爭(zhēng)的選擇器具有相同的重要性和專(zhuān)用性，那么第三個(gè)因素將幫助決定哪一個(gè)規(guī)則獲勝——后面的規(guī)則將戰(zhàn)勝先前的規(guī)則。

繼承

CSS繼承是我們需要研究的最后一部分，以獲取所有信息并了解什么樣式應(yīng)用于元素。其思想是，應(yīng)用于某個(gè)元素的一些屬性值將由該元素的子元素繼承，而有些則不會(huì)。

哪些屬性默認(rèn)被繼承哪些不被繼承大部分符合常識(shí)。如果你想確定，你可以 參考CSS參考資料—— 每個(gè)單獨(dú)的屬性頁(yè)都會(huì)從一個(gè)匯總表開(kāi)始，其中包含有關(guān)該元素的各種詳細(xì)信息，包括是否被繼承。

繼承屬性是CSS最基本的內(nèi)容之一，一般不會(huì)特別考慮，但是還是要記住的是：

• 大部分框模型屬性（如border）不會(huì)繼承。

• 繼承沒(méi)有特殊性，且低于0,0,0,0 如 * {color: red;}

控制繼承

CSS為處理繼承提供了三種特殊的通用屬性值：

• inherit： 該值將應(yīng)用到選定元素的屬性值設(shè)置為與其父元素一樣。

• initial ：該值將應(yīng)用到選定元素的屬性值設(shè)置為與瀏覽器默認(rèn)樣式表中該元素設(shè)置的值一樣。如果瀏覽器默認(rèn)樣式表中沒(méi)有設(shè)置值，并且該屬性是自然繼承的，那么該屬性值就被設(shè)置為 inherit。

• unset ：該值將屬性重置為其自然值，即如果屬性是自然繼承的，那么它就表現(xiàn)得像 inherit，否則就是表現(xiàn)得像 initial。

總結(jié)

層疊樣式表這個(gè)名字很貼切。 CSS所采用的方法就是讓樣式層疊在一起，這是通過(guò)結(jié)合繼承和特殊性做到的?。CSS2.1 的層疊規(guī)則相當(dāng)簡(jiǎn)單。

1. 找出所有相關(guān)的規(guī)則，這些規(guī)則都包含與一個(gè)給定元素匹配的選擇器。

2. 按顯式權(quán)重對(duì)應(yīng)用到該元素的所有聲明排序。標(biāo)志 !important 的規(guī)則的權(quán)重要高于沒(méi)有 !important 標(biāo)志的規(guī)則。按來(lái)源對(duì)應(yīng)用到給定元素的所有聲明排序。共有3種來(lái)源：創(chuàng)作人員、讀者和用戶(hù)代理。正常情況下，創(chuàng)作人員的樣式要?jiǎng)龠^(guò)讀者的樣式。有 !important 標(biāo)志的讀者樣式要強(qiáng)于所有其他樣式，這包括有 !important 標(biāo)志的創(chuàng)作人員樣式。創(chuàng)作人員樣式和讀者樣式都比用戶(hù)代理的默認(rèn)樣式要強(qiáng)。

3. 按特殊性對(duì)應(yīng)用到給定元素的所有聲明排序，有較高特殊性的元素權(quán)重大于有較低特殊性的元素.

4. 按出現(xiàn)的序?qū)��?yīng)用到給定元素的所和聲明排序。一個(gè)聲明在樣式表或文檔中越后出現(xiàn)，它的權(quán)重越大，如果樣式表中有導(dǎo)入的樣式表，一般認(rèn)為出現(xiàn)在導(dǎo)入樣式表中的聲明在前，主樣式表中的所有聲明在后。

相關(guān)推薦：

CSS結(jié)構(gòu)與布局

以上就是關(guān)于CSS結(jié)構(gòu)與層疊詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！