CSS 選擇器特異性與優先權

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

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

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

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

2. 特異性：

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

     • #id 比.classname
     • .classname 比tagname
   ]

3. 最後一條規則優先：

   • 如果兩個選擇器具有相同的特性，則CSS 文件中最後聲明的選擇器優先。

例：

body { font-size: 14px; }
#header { font-size: 16px; }

考慮以下CSS規則：

body { 字型大小：14px; } #header { 字體大小：16px; }

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

元素。

註：

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