Question

我有多个具有相同属性的类：

.class1 > div{
  background-color: red;
}

我尝试使用以下方法减少CSS代码：

.class1, .class2, .class3 > div{
  background-color: red;
}

但是它无法正常工作，在这种情况下只需要最后一个类.class3。

有没有办法正确地做到这一点？

Answer 1

如果您希望为每个类选择子div，您需要使用每个类的选择器指定它，如下所示：

<强> CSS

.class1 > div, .class2 > div, .class3 > div {
  background-color: red !important;
}

Single Selector (Wrong)

Selector For Each Class (Right)

Answer 2

您将能够在CSS Selectors Level 4中使用:matches伪类。

:matches(.class1, .class2, .class3) > div {
  ...
}

此刻仅适用于某些浏览器，例如最新的Apple Safari。

目前，您必须在Firefox和Chrome中使用旧语法:any及其各自的前缀。 IE和Edge不支持。

:-moz-any(.class1, .class2, .class3) > div { ... }
:-webkit-any(.class1, .class2, .class3) > div { ... }

:-moz-any(.class1, .class2, .class3) > div {
  background: aqua;
}
:-webkit-any(.class1, .class2, .class3) > div {
  background: aqua;
}
:matches(.class1, .class2, .class3) > div {
  background: aqua;
}

<div class="class1"><div>1</div></div>
<div class="class2"><div>2</div></div>
<div class="class3"><div>3</div></div>
<div class="class4"><div>4</div></div>
<div class="class5"><div>5</div></div>

希望标准:matches将在不久的将来在所有主流浏览器中提供。除此之外，请为每个选择器编写整个选择器并用逗号分隔：

.class1 > div,
.class2 > div,
.class3 > div {
  ...
}

参考文献：

选择具有相同属性的多个类

2 个答案: