如何在 CSS 中有效地設定具有相似類別名稱的元素的樣式？

在CSS 中對類別使用通配符：* 和屬性選擇器

當使用遵循特定模式的多個類別來設計元素時，為多個類別建立單獨的規則可能會很乏味。每個變化。這就是 CSS 通配符發揮作用的地方。

在您的情況下，您希望將背景顏色應用於類別名稱為“tocolor-1”、“tocolor-2”、“tocolor-3”的多個元素雖然使用像“.tocolor- *」這樣的通配符似乎是一個解決方案，但它在CSS 中不起作用。

相反，您可以利用屬性選擇器來實現此目標。屬性選擇器可讓您根據元素的屬性（例如類別）來定位元素。

[class^="tocolor-"], [class*=" tocolor-"] {
  background: red;
}

在此程式碼中，屬性選擇器[class^="tocolor-"] 定位類別屬性以「開頭的元素」 tocolor-"，有效匹配類別名稱為「tocolor-1」、所有「tocolor-2」等的元素。目標類別的元素屬性包含子字串“tocolor-”，後面跟著空格字元。您可以根據一組元素的共享模式將樣式應用到一組元素，而無需對於詳細和重複的類別聲明。屬性選擇器的更多信息，請參閱以下內容資源：

以上是如何在 CSS 中有效地設定具有相似類別名稱的元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！