CSS 特異性：樣式背後的權重

介紹

將 CSS 想像成一場時裝秀，不同的風格競相吸引註意力。獲勝者？最“重量”或最特殊的風格。在這篇文章中，我們將揭開 CSS 特異性背後的謎團，解釋它的工作原理以及它的重要性。

了解 CSS 特殊性

特異性是分配給每個 CSS 選擇器的數值。它決定當多個樣式套用於同一元素時哪個樣式規則獲勝。將其視為一場時尚大賽，最時尚的服裝成為焦點。

如何計算特異性

特異性是根據四個因素計算的：

1. 內嵌樣式：使用 style 屬性直接套用於元素的樣式。它們具有最高的特異性 (1, 0, 0, 0)。
2. ID： 使用#id 語法的選擇器。每個ID貢獻100分（0,1,0,0）。
3. 類別、屬性和偽類別： 使用 .class、[attribute] 或 :pseudo-class 的選擇器各貢獻 10 分 (0, 0, 1, 0)。
4. 元素與偽元素： 針對元素（如 p、div）或偽元素（如 ::before、::after）的選擇器各貢獻 1 分 (0, 0, 0, 1)。

範例：

• #my-id .my-class:hover 的特異性為 (0, 1, 1, 0) 或 110 點。
• .my-class p 的特異性為 (0, 0, 1, 1) 或 11 點。

特異性最高的規則獲勝。

特異性的影響

• 覆蓋樣式：更具體的選擇器可以覆蓋較不特定的選擇器。例如，內聯樣式將始終覆蓋樣式表中定義的樣式。
• 意想不到的後果：高特異性可能會導致難以覆蓋樣式，從而導致意想不到的結果。
• 調試：了解特異性有助於找出樣式衝突並有效解決它們。

現實世界的例子

假設您有一個具有以下樣式的按鈕：

button {
  color: blue;
}

.primary-button {
  color: red;
}

#important-button {
  color: green;
}

如果按鈕具有類別primary-button和ID important-button，則將套用ID中的綠色，因為它具有最高的特異性。

結論

CSS 特異性可能是一個複雜的主題，但理解它對於掌握 CSS 至關重要。透過掌握特異性的計算方式及其對樣式應用的影響，您將能夠更好地創建結構良好且可預測的樣式。

在下一篇文章中，我們將深入研究 CSS 層，這是用於管理特異性和改進 CSS 架構的強大工具。

以上是CSS 特異性：樣式背後的權重的詳細內容。更多資訊請關注PHP中文網其他相關文章！