css選擇器優先權是什麼

CSS 選擇器優先權依下列順序決定：特殊性（ID > 類別> 類型> 通配符）來源順序（行內> 內部樣式表> 外部樣式表> 使用者代理樣式表）聲明順序（靠後的聲明優先）重要性（!important 強制提高優先權）

CSS選擇器優先權

CSS選擇器優先權決定了當多個選擇器套用到元素時，哪個選擇器將會被使用。優先順序高的選擇器將覆蓋優先順序低的同類型選擇器。

CSS選擇器優先權由以下四個面向決定，由高到低排列：

1. 特殊性

##特殊性由選擇器中使用的選擇器類型的數量和位置決定。下列類型的選擇器特殊性依序增加：

ID選擇器（#）
• #類別選擇器（.）
• 類型選擇器（html、body等等）
• 通配符（*）

2. 來源順序

如果兩個選擇器的特殊性相同，則來自更具體來源的選擇器優先權更高。來源順序依序為：

行內樣式
• 內樣式表
• #外部樣式表
• 使用者代理程式樣式表

3. 宣告順序

如果兩個選擇器的特殊性和來源順序都相同，則寫在CSS 文件中靠後的宣告優先權會更高。

4. 重要性

!important 關鍵字可以強制提高選擇器的優先權。然而，它的使用應避免，因為它會破壞 CSS 的可維護性。

範例：

以下範例說明了優先順序的應用：

#primary {
  color: red;
}

.bold {
  color: blue;
}

p {
  color: green;
}

body {
  color: black;
}

p.bold {
  color: purple !important;
}

在上面的範例中，

p.bold 的特殊性為2（類型選擇器類別選擇器），且宣告中包含!important，因此具有最高的優先權。因此，對於具有p.bold 類別的段落，p.bold 的樣式（紫色）將被應用，而不是#primary（特殊性為1 ）、.bold（特殊性為1）或p（特殊性為0）的樣式。

以上是css選擇器優先權是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！