CSS 基礎回顧 - 層疊、優先級和繼承

CSS 基礎回顧 - 層疊、優先級和繼承

層疊指的是決定同一個DOM元素的樣式定義的一系列規則。它決定了如何解決衝突，是CSS語言的基礎。

下面分析層疊的規則。當生命衝突時，層疊會依據三種條件解決衝突。

• 樣式表的來源： 樣式從哪來的，包括你的樣式和瀏覽器默認樣式等。
• 選擇器優先級：哪些選擇器比另外一些選擇器更重要。
• 源碼順序：樣式在樣式表裏的聲明順序。

樣式表來源

你添加到網頁中的樣式表並非惟一使用的樣式表，包括你的樣式和瀏覽器默認樣式等。

! important聲明 ：樣式來源規則有個例外，標記爲重要（important）的聲明。 優先級從高到低：! important聲明 => 做者樣式表 => 瀏覽器樣式

理解優先級

若是沒法用來源解決衝突聲明，瀏覽器會嘗試檢查它們的優先級。

瀏覽器將優先級分爲兩部分：HTML的行內樣式和選擇器樣式。

1. 行內樣式

行內樣式會覆蓋任何來自樣式表或者<style>標籤的樣式（import 例外）。行內樣式沒有選擇器，由於它們值做用域所在元素。

2. 選擇器優先級

不一樣類型的選擇器有不一樣的優先級：

ID選擇器 > 類選擇器 > 標籤選擇器

實際上，ID選擇器的優先級比擁有任意多個類的選擇器都高。

優先級的準確規則以下。

• 若是選擇器的ID數量更多，則它會勝出（即它更明確）
• 若是ID數量一致，那麼擁有最多類的選擇器勝出。
• 若是以上兩次比較都一致，那麼擁有最多標籤名的選擇器生出。

❝

僞類選擇器（如： hover）和屬性選擇器（如[type=「input」]）與一個類選擇器的優先級相同。通用選擇器（*）和組合器（>、+、~）對優先級沒有影響。

❞

這個概念很簡單，可是若是不理解優先級，那就弄不清楚爲何一個規則能生效，另外一個卻不能。

3. 優先級標記

一個經常使用的表示優先級的方式是用數值形式來標記，一般用逗號隔開每一個數。如： 1,2,2表示選擇器由1個ID、2個類、2個標籤組成。優先級最高的ID排在第一個，緊接着是類，而後是標籤。

[image:B19764DB-4D70-47ED-A016-CF368B93452D-90240-0001B55CAF5326F4/29069885-F574-44AA-A8E8-75D544DEBFF6.png]

如今經過比較數值就能決定哪一個選擇器優先級更高（更明確）。「1,0,0」的優先級高於「0,2,2」甚至「0,10,0」（儘管我不推薦寫一個長達10個類名的選擇器），由於第一個數（ID）有最高優先級。

還能夠用4個數字來標記，第一位用0或1來表示，是不是用行內樣式添加，1,0,0,0。

4. 源碼的順序

層疊的最後一步，是源碼順序。若是兩個生命得了哀怨和優先級相同，其中一個聲明在樣式表中出現較晚，或者位於頁面較晚引入的樣式表中，則該聲明生出。 也就是說，優先級相同時，後出現的樣式會覆蓋先出現的樣式。

5. 兩條經驗法則

• 在選擇器中不要使用ID。就算使用一個ID,也會大幅提高優先級。很難覆蓋這個樣式。
• 不要使用 !important。它比ID更難覆蓋，一旦用它，想要覆蓋原先的聲明，就必須再加上一個 !important。

繼承

還有最後一種給元素添加樣式的方式：繼承。 若是一個元素的某個屬性沒有層疊值，則可能會繼承某個祖先元素的值。

不是全部屬性都能被繼承：

• 主要是跟文本相關的屬性： color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing
• 列表屬性：list-style、list-style-type、list-style-position 以及 list-style-image
• 表格的邊框屬性 border-collapse 和border-spacing
• … (以上爲不徹底枚舉)

特殊值

• inherit: 當想用繼承來代替一個層疊值時，用它來覆蓋另外一個值，這樣元素就能繼承其父元素的值。
• initial: 每一個CSS屬性都有初始值，使用它來將屬性充值未默認值。注： auto 不是全部屬性的默認值。

總結

• 控制選擇器的優先級
• 不要混淆層疊和繼承
• 某些屬性會被繼承，包括文本、列表、表格邊框相關屬性
• 不要混淆 initial和 auto值

本文使用 mdnice 排版