介紹
將 CSS 想像成一場時裝秀，不同的風格競相吸引註意力。獲勝者？最“重量”或最特殊的風格。在這篇文章中，我們將揭開 CSS 特異性背後的謎團，解釋它的工作原理以及它的重要性。
了解 CSS 特殊性
特異性是分配給每個 CSS 選擇器的數值。它決定當多個樣式套用於同一元素時哪個樣式規則獲勝。將其視為一場時尚大賽，最時尚的服裝成為焦點。
如何計算特異性
特異性是根據四個因素計算的：
- 內聯樣式：使用 style 屬性直接套用於元素的樣式。這些具有最高的特異性 (1, 0, 0, 0)。
- ID：使用#id 語法的選擇器。每個ID貢獻100分（0,1,0,0）。
- 類別、屬性和偽類別：使用 .class、[attribute] 或 :pseudo-class 的選擇器各貢獻 10 分 (0, 0, 1, 0)。
- 元素與偽元素：針對元素（如 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 點。
具有最高特異性的規則獲勝。
特異性的影響
- 覆蓋樣式：更具體的選擇器可以覆蓋不太特定的選擇器。例如，內聯樣式將始終覆蓋樣式表中定義的樣式。
- 意想不到的後果：高特異性可能會導致難以覆蓋樣式，從而導致意想不到的結果。
- 調試：了解特異性有助於找出樣式衝突並有效解決它們。
現實世界的例子
假設您有一個具有以下樣式的按鈕：
雷雷
如果按鈕具有類別primary-button和ID important-button，則將套用ID中的綠色，因為它具有最高的特異性。
結論
CSS 特異性可能是一個複雜的主題，但理解它對於掌握 CSS 至關重要。透過掌握特異性的計算方式及其對樣式應用的影響，您將能夠更好地創建結構良好且可預測的樣式。
在下一篇文章中，我們將深入研究 CSS 層，這是一個用於管理特異性和改進 CSS 架構的強大工具。
以上是CSS 特異性：樣式背後的權重的詳細內容。更多資訊請關注PHP中文網其他相關文章！
