CSS 特異性解釋：如何控制哪種樣式獲勝

您是否曾經花數小時調整 CSS，想知道為什麼這種頑固的樣式不適用？歡迎來到特異性的世界。

特異性是指當多個規則針對相同元素時，瀏覽器如何決定要套用哪個 CSS 規則。如果不理解它，您的樣式表很快就會變得一團糟。讓我們來分解一下。

特異性層次結構

1. 通用選擇器：零點競爭者

通用選擇器 (*) 位於特異性鏈的底部，具有 0 點。這就像所有事情的一攬子規則，但幾乎會被其他任何事情所推翻。

範例：

* {
  color: red;
}
h1 {
  color: blue;
}

即使有 * { color: red; }，一個

；將為藍色，因為元素選擇器獲勝。

2. 元素選擇器：1 個特異性點

元素選擇器（h1、p、div）比通用選擇器更強，帶有 1 點。

範例：

h1 {
  color: green;
}

此規則將覆蓋針對相同元素的通用選擇器。

3.類、偽類或屬性選擇器：10分

像 .button、:hover 或 [type="text"] 這樣的選擇器比較具體，有 10 分。

範例：

.button {
  color: purple;
}

這將覆蓋通用選擇器和元素選擇器。

4. ID選擇器：100分

ID (#submitButton) 的功能明顯更強大，有 100 分。謹慎使用它們，因為它們會使樣式更難管理。

範例：

#submitButton {
  background-color: yellow;
}

5. 內聯樣式：1,000 點 – 重量級

內聯樣式勝過一切，除了 !important。

範例：

<div>



<h4>
  
  
  6. The Almighty !important
</h4>

<p>Adding !important forces a rule to override others, even inline styles. But overusing it can lead to chaos in your CSS. It can be necessary when using third-party libraries to help override predefined styles.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.button {
  color: red !important;
}

當特異性相關時，順序就很重要

如果兩個規則具有相同的特異性，則樣式表中稍後出現的規則獲勝。

範例：

h1 {
  color: red;
}
h1 {
  color: green;
}

這裡，

將為綠色，因為第二條規則較晚。

特異性點回顧

• 通用選擇器 (*): 0 分
• 元素選擇器（div、p）：1 分
• 類別、偽類、屬性選擇器：10 分
• ID 選擇器 (#id)：100 分
• 內嵌樣式：1,000 分
• ！重要：覆蓋一切

掌握特異性可以讓您編寫乾淨、可維護的 CSS，從而避免無休止的調試。下次當你的風格不正常時，你就會知道該往哪裡看。

以上是CSS 特異性解釋：如何控制哪種樣式獲勝的詳細內容。更多資訊請關注PHP中文網其他相關文章！