CSS重要概念層疊，你搞清楚了嗎！

• CSS簡介
• CSS層疊
• • 樣式表的來源
  • 樣式表優先級
  • 源碼順序
• 總結
• 最後的最後

CSS簡介

CSS在1994年被提出，1996年由Internet Explorer 3首次（部分地）實作。每個經驗豐富的Web開發者在見識到CSS的神奇效果後，大部分會問：“我該如何學習CSS? ”

在軟體開發中，CSS是很特别的存在。嚴格來講，它不是程式設計語言，卻要求抽象思維。它不是純粹的設計工具，卻要求創造力。它提供了看似簡單的聲明式文法，但是在大型項目中寫過CSS的人都知道它可能會變得極其複雜。在學習傳統程式設計中遇到問題時，你通常知道該搜尋什麼（比如，“如何找到一個數組裡類型為x的元素”）。在CSS中，卻很難将問題提煉成一句話。即使可以，答案一般也是“這得看情況”。最好的解決辦法通常取決于具體場景，以及你希望以多大粒度處理各種邊緣情況。

CSS層疊

在講解層疊之前，先讓我們先一段代碼，在html中建立一個div，代碼如下：

<div id="menus" class="layui-menus"></div>
           

接下來，我們對這個div聲明規則，代碼如下：

/** 标簽選擇器 */
div {
    font-size: 12px;
    color: #fff;
}

/** ID選擇器 */
#menus {
    font-size: 14px;
    color:#000; 
}

/** 類選擇器 */
.layui-menus{
    font-size: 16px;
    color:#fff;
}
           

三個規則集嘗試給菜單設定不同的字型和顔色，哪一個會生效呢？浏覽器為了解決這個問題會遵循一系列規則，是以最終的效果可以預測。在上面的代碼裡，規則決定了第二個聲明（即 ID選擇器）生效。

層疊指的就是這一系列規則。它決定了如何解決沖突，是CSS語言的基礎。雖然有經驗的開發人員對層疊有大體的了解，但是層疊裡有些規則還是容易讓人誤解。

下面來分析層疊的規則。當聲明沖突時，層疊會依據三種條件解決沖突。

(1) 樣式表的來源：

樣式是從哪裡來的，包括你的樣式和浏覽器預設樣式等。

(2) 選擇器優先級：

哪些選擇器比另一些選擇器更重要。

(3) 源碼順序：

樣式在樣式表裡的聲明順序。

這些規則讓浏覽器以可預測的方式解決CSS樣式規則的沖突。我們來一個一個地分析。

樣式表的來源

你添加到網頁裡的樣式表并不是浏覽器唯一使用的樣式表，還有其他類型或來源的樣式表。你的樣式表屬于作者樣式表，除此之外還有使用者代理樣式表，即浏覽器預設樣式。使用者代理樣式表優先級低，你的樣式會覆寫它們。使用者代理樣式表因為設定了使用者普遍需要的樣式，是以不會做一些完全超出預期的事情。當你不喜歡預設樣式時，可以在自己的樣式表裡設定别的值。例如：ul li 标簽前面的小黑點，連結為藍色且有下劃線等。

• important聲明

樣式來源規則有一個例外：标記為重要（important）的聲明。如下所示，在聲明的後面、分号的前面加上！important，該聲明就會被标記為重要的聲明。

#menus {
    font-size: 14px;
    color:#000 !important; 
}
           

标記了!important的聲明會被當作更高優先級的來源，是以總體的優先級按照由高到低排列如下所示：

(1) 作者的！important

(2) 作者

(3) 使用者代理

層疊獨立地解決了網頁中每個元素的樣式屬性的沖突。例如，如果給段落設定加粗的字型，使用者代理的上下外邊距樣式仍然會生效（除非被明确覆寫）。處理過渡和動畫時，還會再提到樣式來源的概念，因為它們會引入更多的來源。! important 注釋是 CSS的一個有趣而怪異的特性，稍後會再解釋。

樣式表優先級

如果無法用來源解決沖突聲明，浏覽器會嘗試檢查它們的優先級。了解優先級很重要。不了解樣式的來源照樣可以寫CSS，因為99%的網站樣式是來自同樣的源。但是如果不了解優先級，就會被坑得很慘。浏覽器将優先級分為兩部分：HTML的行内樣式和選擇器的樣式。

• 行内樣式

如果用HTML的style屬性寫樣式，這個聲明隻會作用于目前元素。實際上行内元素屬于“帶作用域的”聲明，它會覆寫任何來自樣式表或者

為了在樣式表裡覆寫行内聲明，需要為聲明添加！important，這樣能将它提升到一個更高優先級的來源。但如果行内樣式也被标記為

!important，就無法覆寫它了。最好是隻在樣式表内用！important。将以上修改撤銷，我們來看看更好的方式。

• 選擇器優優先

優先級的第二部分由選擇器決定。比如，有兩個類名的選擇器比隻有一個類名的選擇器優先級更高。如果一個聲明将字型顔色設定為白色，但另一個更高優先級的聲明将其設定為黑色，浏覽器就會将黑色應用到元素上。

/** 更高優先級的選擇器 */
#menus div{
	color:#000; 
}

.layui-menus{
    color: #fff;
}
           

不同類型的選擇器有不同的優先級。比如，ID 選擇器比類選擇器優先級更高。實際上，ID選擇器的優先級比擁有任意多個類的選擇器都高。同理，類選擇器的優先級比标簽選擇器（也稱類型選擇器）更高。

優先級的準确規則如下。

❑ 如果選擇器的ID數量更多，則它會勝出（即它更明确）。

❑ 如果ID數量一緻，那麼擁有最多類的選擇器勝出。

❑ 如果以上兩次比較都一緻，那麼擁有最多标簽名的選擇器勝出。

說明：僞類選擇器（如：hover）和屬性選擇器（如[type=“input”]）與一個類選擇器的優先級相同。通用選擇器（＊）群組合器（>、+、～）對優先級沒有影響。

如果你在 CSS 裡寫了一個聲明，但是沒有生效，一般是因為被更高優先級的規則覆寫了。很多時候開發人員使用 ID選擇器，卻不知道它會建立更高的優先級，之後就很難覆寫它。如果要覆寫一個ID選擇器的樣式，就必須要用另一個ID選擇器。這個概念很簡單，但是如果你不了解優先級，就無法弄清楚為什麼一個規則能生效，另一個卻不能。

源碼順序

如果兩個聲明的來源和優先級相同，其中一個聲明在樣式表中出現較晚，或者位于頁面較晚引入的樣式表中，則該聲明勝出。也就是說，可以通過控制源碼順序，來給特殊連結添加樣式。如果兩個沖突選擇器的優先級相同，則出現得較晚的那個勝出。

div .layui-menus {
    color: #fff;
}

.layui-menus div {
    color: #000;
}
           

在這個方法裡，選擇器優先級相同。源碼順序決定了哪個聲明作用于特殊連結，最終的字型顔色為黑色。

總結

浏覽器遵循三個步驟，即來源、優先級、源碼順序，來解析網頁上每個元素的每個屬性。如果一個聲明在層疊中“勝出”，它就被稱作一個層疊值。元素的每個屬性最多隻有一個層疊值。網頁上一個特定的段落（

）可以有一個上外邊距和一個下外邊距，但是不能有兩個不同的上外邊距或兩個不同的下外邊距。如果 CSS 為同一個屬性指定了不同的值，層疊最終會選擇一個值來渲染元素，這就是層疊值。

正如之前所說，在CSS中最好的答案通常是“這得看情況”。實作相同的效果有很多途徑。多想些實作方法，并思考每一種方法的利弊，這是很有價值的。面對一個樣式問題時，我經常分兩個步驟來解決它。首先确定哪些聲明可以實作效果。其次，思考可以用哪些選擇器結構，然後選擇最符合需求的那個。

最後的最後

為初學者提供學習指南，為從業者提供參考價值。我堅信碼農也具有産生洞見的能力。掃描下圖二維碼關注，學習和交流！