如何在 CSS 中有效地设置具有相似类名的元素的样式？

在 CSS 中对类使用通配符：* 和属性选择器

当使用遵循特定模式的多个类来设计元素时，为多个类创建单独的规则可能会很乏味。每个变化。这就是 CSS 通配符发挥作用的地方。

在您的情况下，您希望将背景颜色应用于类名称为“tocolor-1”、“tocolor-2”、“tocolor-3”的多个元素虽然使用像“.tocolor-*”这样的通配符似乎是一个解决方案，但它在 CSS 中不起作用。

相反，您可以利用属性选择器来实现此目标。属性选择器允许您根据元素的属性（例如类）来定位元素。

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

在此代码中，属性选择器 [class^="tocolor-"] 定位类属性以“开头的元素” tocolor-"，有效匹配类名称为“tocolor-1”、“tocolor-2”等的所有元素。

选择器 [class*=" tocolor-"] 目标类的元素属性包含子字符串“tocolor-”，后跟空格字符。这会匹配“tocolor-highlight”、“my-class tocolor-blue”等元素。

通过使用属性选择器，您可以根据一组元素的共享模式将样式应用到一组元素，而无需对于详细和重复的类声明。

有关 CSS 属性选择器的更多信息，请参阅以下内容资源：

• [CSS 属性选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
• [CSS 属性选择器] (https://www.w3schools.com/cssref/css_selectors.asp)

以上是如何在 CSS 中有效地设置具有相似类名的元素的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！