CSS 特性初學者指南

您是否曾經嘗試過覆蓋 CSS 規則，卻發現它無法正常工作？ 或者註意到當使用不同的 CSS 選擇器組合多次定位一個元素時，一次只應用一個規則？ 這都是因為 CSS 特異性規則。

CSS 特異性規則可能是最難理解的概念之一，尤其是對於初學者而言。

如果您剛剛開始使用 CSS，作為標準順序規則，您可能認為最新的 CSS 規則應該覆蓋舊的。 這看起來很簡單，但並不總是這樣。 這取決於 CSS 的特殊性，何時以及應應用哪個 CSS 規則。

因此，讓我們分解什麼是 CSS 特異性以及如何有效地使用它。

什麼是 CSS 中的特殊性？

簡而言之，如果一個元素有多個 CSS 選擇器，則將應用具有較高特定值的那個。

不同的選擇器具有不同的權重，瀏覽器將決定哪個與該元素最相關。

它是如何工作的？

選擇器的特殊性可以分為以下四個級別：

1. 內聯樣式或 CSS
2. 身份證
3. 類、偽類和屬性
4. 元素或偽元素

內聯樣式或CSS ，其中 CSS 直接應用於 HTML 文檔，看起來像這樣<p> 。 內聯樣式將始終具有最高的特異性級別。

此順序中的第二個是ID ，例如#content 。 因此，任何使用 ID 的選擇器都將具有第二高的特異性級別。

類、偽類和屬性在這個順序中排在第三位。 它們看起來分別像： .post 、 :hover和[title] 。

元素和偽元素的值最小。 li和:after是元素和偽元素的基本示例。

計算

可以使用以下準則計算特異性值：

• 內聯樣式或 css：1,0,0,0
• 編號：0,1,0,0
• 類或偽類和屬性：0,0,1,0
• 元素和偽元素：0,0,0,1
• 通用選擇器（*）：0

要檢查選擇器的特異性級別，您可以使用特異性計算器。

CSS 特異性的基本規則

現在您已經了解特異性是如何組織的，讓我們討論一些通用規則和示例！

這是我將在示例中使用的基本 HTML。 在這裡，我在帶有#content的容器中有一個小列表。

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

規則1

如果一個元素有兩個或多個相同的選擇器，它們都將具有相同的特異性值，因此將應用較低的一個或最後一個。

在下面的 CSS 片段中，兩個選擇器具有相同的特異性，因此li顏色將為黃色，因為它被放置在更靠後的位置。

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

規則 2

如果一個元素使用了多個選擇器，則將應用具有較高特定值的選擇器。

在下面的示例中， li是兩個不同選擇器的目標，並且都影響字體顏色。 那麼，應該適用哪條規則呢？

與前面的實例一樣，在 CSS 順序概念中應該應用第二個（因此 li 顏色將為綠色）但是因為.list li具有比ul li更高的特異性值，顏色將保持紅色。

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

規則 3

我們看到類在特異性級別上超過元素，現在讓我們看看 ID 會發生什麼。

在下面的示例中，我們有一個類和 ID 都針對相同的元素並影響字體顏色。 同樣的問題：應適用哪條規則？

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

如前所述，ID 比類、屬性和元素具有更高的特異性值，因此顏色將是藍色。 始終以ID為目標以獲得更高的特異性級別。

規則 4

!important將覆蓋任何特定值的任何選擇器。 但請記住!important不應該被過度使用，因為它不被認為是 CSS 最佳實踐。

如果您是 CSS 的作者並且沒有覆蓋現有規則，則幾乎不需要使用!important 。

!important僅當您試圖覆蓋其他人的 CSS 並且您的特殊性無法勝過先前的選擇器時使用，尤其是當您無法控制您的 CSS 在 HTML 中的放置順序時。

這主要發生在使用 WordPress 時，您會發現許多 CSS 文件已經由不同的插件和主題添加。

通常，插件 CSS 特定於插件並使用 ID、inline-css，甚至!important以獲得更高的特異性，以避免任何 CSS 衝突。 要覆蓋該 CSS，您必須使用更高的特異性； 對於這些場景，您可以使用!important 。

在下面的示例中，我重新創建了以前的場景，其中li以不同的 CSS 選擇器為目標，但您可以看到!important覆蓋了所有規則並且顏色將變為黃色。

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important將使您能夠在任何特定級別之上執行您的 CSS。

使用!important時需要小心，因為您無法覆蓋此規則。 覆蓋!important唯一方法是稍後在 CSS 中使用另一個!important ，因此如果您不了解它的強大功能，您的 CSS 很容易看起來很亂。

少數例外

元素和偽元素的特殊性最低，但也有一些有趣的（並且有點令人困惑！）例外。 （令人困惑，因為他們似乎不遵守我們剛剛看到的規則。）

在此示例中，您將看到:first-child （偽類）和 :first-line（偽元素）。 我們剛剛了解到偽類會比偽元素有更高的特異性，所以根據這個，段落的第一行顏色應該是綠色，而不是粉紅色。

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

您可能認為這裡的順序是個問題，但即使切換順序也不會改變輸出。 特異性計算器顯示的圖片與結果不同。

這是特異性變得有點混亂的地方。 我只能假設這個結果的原因是:first-line更接近元素並且可能被視為內聯樣式。 您可以查看 jsfiddle 以獲取另一個示例。

如何有效地使用特異性？

如果您了解 CSS 特異性規則，您可以非常有效地使用它並使您的 CSS 可重用。

假設您想使用相同的.button但背景顏色不同，因此您設置了一個特定的選擇器： .red-block .button 。

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

如果.button包裝在.red-block容器中，則默認按鈕背景顏色將變為紅色。

CSS 特異性在自定義 WordPress 主題時非常有用，您可以在其中嘗試用自己的 CSS 覆蓋主題作者的 CSS。

要避免的常見錯誤

有些人使用超特定的選擇器，這不是一個好習慣。 僅根據需要具體說明。 例如，此代碼片段以li為目標，但過於具體。

 [css] div#content ul.list li{ color: purple; } [/css]

如果您的 CSS 過於具體，它將變得僵化並且難以重用。 您可以輕鬆地編寫.list li而不是div#content ul.list li ，這將使您的 CSS 更清晰。

額外資源

• W3 組織的特異性
• CSS 特異性計算器
• 瀏覽器錯誤
• IE黑客

結論

如您所見，CSS 特異性是一個重要的工具，每個前端開發人員都應該在他們的工具包中擁有它。 清楚地理解這個概念可以讓你成為一名優秀的前端開發人員。