如何在 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中文网其他相关文章！