如何確定 CSS 選擇器優先權？

CSS 選擇器特異性與優先權

當多個CSS 選擇器套用於單一元素時，瀏覽器必須決定哪個選擇器優先。這稱為選擇器特異性。

決定選擇器特異性的規則：

1. ！重要和內聯樣式覆蓋：

   • 使用 !important 標誌聲明的樣式或使用 style 屬性內聯的樣式具有最高優先權。

2. 特異性：

   • 選擇器的特異性由其組件的數量和類型決定：

     • #id 的特異性高於.classname
     • .classname 比
     .classname
     比
   🎜>

3. 最後一條規則優先：
如果兩個選擇器具有相同的特異性，則CSS 檔案中最後聲明的一個優先。

範例：

<code class="css">body { font-size: 14px; }
#header { font-size: 16px; }</code>

考慮以下CSS 規則：

對於

中的元素，這兩個規則都適用。然而，由於 #header 選擇器具有更高的特異性（#id > tagname），因此其 16px 的字體大小值將應用於

標籤。

注意：

針對同一元素且具有不同特異性等級的多個規則並不罕見。這可用於最佳化特定情況的樣式或覆寫特定實例的全域規則。

以上是如何確定 CSS 選擇器優先權？的詳細內容。更多資訊請關注PHP中文網其他相關文章！