Question

HTML：

<div class="home">
 <div class="a">
   A content
 </div>
 <div class="b">
   B content
 </div>
 <div class="c">
   C content
 </div>
 <div class="d">
   D content
 </div>
 <div class="e">
   E content
 </div>
</div>

要为家庭类下的a，c和e子项应用常用样式，我们可以使用多个css选择器，如下所示。

CSS：

.home .a,.home .c,.home .e{
 background-color:#ccc;
}

问题： 以上css的缩短版本是什么？

现在作为c和e是家庭的普通孩子。我不是一次又一次地重复.home，而是如何编写更短的语法来选择家庭类下的类a，b和c。

可能是这样的：

.home(.a,.c,.e){
 color:#ccc;
}

我知道这是错的，但我只是在这里明确了解我的问题，我正在寻找什么。

Answer 1

代码.home(.a,.c,.e)不起作用，CSS选择器没有OR运算符。 home .a,.home .c,.home .e是最短路。

但是这里有一些可能会帮助你的选择器：

.home div { } /* all divs in home */
.home > div { } /* all divs that are a direct child of .home */
.home * { } /* all elements in .home */
.home > * { } /* all direct children of .home */

还有一些CSS预处理器，如SASS和LESS，可为您提供更多可能性。

Answer 2

使用子选择器'＆gt;'。

CSS：

.home > div {
  color: #ccc;
}

Answer 3

可以使用div伪类选择

a c，e和:nth-child

.home > div:nth-child(2n + 1) {
    background-color:#ccc;
}

使用给定的标记，这相当于

.home .a, .home  .c, .home .e{
   background-color:#ccc;
}

Codepen示例：http://codepen.io/anon/pen/XbPNPw

Answer 4

如果你想明确提及类的名称（例如a, b, c）但不希望在源css中重复，也许最好开始使用一些CSS预处理器，如Sass或less。例如，使用Sass，您可以在.scss文件中写入：

.home {
    .a, .c, .e {
        background-color:#ccc;
    }
}

在输出中，Sass会将其编译为.css文件：

.home .a, .home .c, .home .e{
    background-color:#ccc;
}

这样可以保持源文件的清洁。

Answer 5

在当前的CSS中，没有这样的语法。

CSS选择器4 has :matches pseudo-class，可以进行此类分组：

.home:matches(.a,.c,.e){
 color:#ccc;
}

不幸的是，浏览器还没有支持它。基于Gecko和WebKit / Blink的浏览器分别以:-moz-any()和-webkit-any()为旧版草案的实验性实现，但您必须编写两次选择器以使其仅在这些浏览器中工作，因此它们现在还远未实用。

但是您可以使用CSS预处理器来简化您的CSS。

CSS语法选择类

5 个答案: