了解 CSS 特異性：樣式規則重要性指南

CSS 愛好者們好！

介紹 ？

有沒有想過為什麼您的 CSS 樣式有時無法如預期般套用？您即將揭開 CSS 最神秘的概念之一：特異性。將其視為國際象棋遊戲，您選擇的每個選擇器都是可能改變網頁外觀結果的一步棋。

以下是您將在本文中學到的內容：

• 理解特異性：它是什麼以及為什麼它對 CSS 樣式至關重要。

• 特異性是如何計算的：打破選擇器的評分系統。

• 實際範例：特殊性發揮作用的真實場景。

• 高階特異性情況：處理巢狀選擇器和偽元素。

• 管理特異性：保持 CSS 整潔和佈局可預測的提示。

最終，您將成為 CSS 規則的大師。

什麼是 CSS 特異性？ ？

特異性是根據 CSS 聲明所使用的選擇器賦予 CSS 聲明的權重。當 CSS 規則發生衝突時，它決定了要應用哪些樣式。將其視為評分系統，其中每種選擇器類型都會貢獻分數，得分最高的規則獲勝。

特異性的層次結構？

特異性的計算方式如下：

1. 內聯樣式 ：這些樣式透過 style 屬性直接套用於元素。它們是最具體的，得分 1,0,0,0.

2. ID ：ID 選擇器將 0,1,0,0 加到分數中。它們非常具體，但不如內聯樣式具體。

3. 類別、屬性和偽類：其中每一個都會將 0,0,1,0 加入到特異性分數中。這包括 .classname、[attribute]、:hover 等。

4. 元素和偽元素：這些是最不具體的，加上0,0,0,1。例如 div、p、::before 等

具體行動範例??

內聯樣式主導

<div>





<pre class="brush:php;toolbar:false">div {
    color: blue;
}

結果：文字將是紅色。內聯樣式勝過所有其他選擇器。

ID 重寫類別

<div>





<pre class="brush:php;toolbar:false">#unique {
    color: red;
}
.common {
    color: blue;
}

結果：文字將是紅色。 ID 選擇器比類別具有更高的特異性。

多類與單類

<div>





<pre class="brush:php;toolbar:false">div {
    color: blue;
}

結果：文字將為綠色。組合選擇器可以提高特異性。

實踐中的具體性？

• 組合選擇器 ：您可以組合選擇器以提高特異性。例如，div#id.class 比 #id 或 .class 更具體。

• 順序的重要性：當特異性相同時，最後定義的規則獲勝。這稱為級聯。

• !important ：作為最後的手段，!important 可以覆蓋特異性，但最好謹慎使用它，因為它可能會導致維護問題。

高級特殊情況？

巢狀選擇器

<div>





<pre class="brush:php;toolbar:false">#unique {
    color: red;
}
.common {
    color: blue;
}

結果：文字將為紫色。由於選擇器鏈，嵌套選擇器更加具體。

偽類與屬性

<div>





<pre class="brush:php;toolbar:false">.red {
    color: red;
}
.red.blue {
    color: green;
}

<div>





<pre class="brush:php;toolbar:false">#container .text {
    color: purple;
}
p.text {
    color: green;
}

結果：輸入將具有黃色背景，因為屬性選擇器被視為與類別具有相同的特異性等級。

管理特異性的技巧？

• 使用類別：類比樣式 ID 更容易維護。

• 避免過度特異性：不要過度使用 ID 選擇器進行樣式設定。它們會使您的 CSS 在需要時難以覆蓋。

• 理解繼承：某些屬性是繼承的，這可能會影響嵌套元素中特異性的工作方式。

• 利用特異性來發揮優勢：知道何時增加重要樣式的特異性，但保持 CSS 結構乾淨。

結論

CSS 特異性決定了發生衝突時將要套用哪些樣式。透過理解和掌握特殊性，您可以製作完全按照您的預期運行的 CSS，從而創建高效且可管理的樣式表。請記住，特殊性不僅僅意味著遵守規則；還意味著明確規則。這是關於具有遠見和靈活性的設計。

祝您編碼愉快，並祝福您的 CSS 始終如一您所需要的具體！ ？

---

？您好，我是 Eleftheria，社群經理、 開發人員、公共演講者和內容創作者。

？如果您喜歡這篇文章，請考慮分享。

？ 所有連結 | X | 領英

以上是了解 CSS 特異性：樣式規則重要性指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！