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

在CSS 中使用通配符設計多個元素

當使用唯一識別碼設計元素時，為每個元素建立單獨的類別可能會變得乏味。 CSS 提供了一種帶有通配符 * 的優雅解決方案。

對類別使用通配符

在您的範例中，您有多個div，每個div 都有兩個類，一個公用類別( tocolor）和個人標識符（例如，tocolor-1）。要使用單一類別來設定它們的樣式，您可以使用以下通配符語法：

.tocolor-* {
  background: red;
}

但是，正如您所發現的，此方法在 CSS 中不起作用。

屬性選擇器救援

正確的方法是使用屬性選擇器，它允許您根據元素的值來選擇元素 屬性。在這種情況下，您可以使用 class 屬性：

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red
}

• [class^="tocolor-"] 選擇 class 屬性以「tocolor-」開頭的元素。
• [class*=" tocolor-"] 選擇類別屬性包含「tocolor-」的元素。

在您的範例中，這兩個條件都會將 div 與類別 tocolor-1、tocolor-2等相匹配

演示和更多信息

您可以看到此解決方案的現場演示at:

[jsfiddle.net/K3693 /1/](http://jsfiddle.net/K3693/1/)

有關CSS屬性選擇器的更多信息，請參閱以下內容資源：

• [CSS 屬性選擇器](https://www.w3.org/TR/selectors/#attribute-selectors)
• [MDN文件：屬性選擇器](https://developer.mozilla.org/en-US/文件/Web/CSS/Attribute_selectors)

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