CSS语法选择一个类下的多个元素

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>

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

问题： 上面css的较短版本是什么

现在作为一个c和e都是普通家庭的孩子。与其一遍又一遍地重复

.home

，我如何编写一个较短的语法来选择home类下的类a、b和c

可能是这样的：

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

---

我知道这是错误的，但我只是对我的问题给出了一个清晰的想法，我在寻找什么。

使用子选择器'>'

CSS:

---

使用子选择器“>”

CSS:

代码

.home（.a、.c、.e）

不起作用，CSS选择器没有

或
运算符<代码>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预处理器，比如和，它们为您提供了更多的可能性
 代码
.home（.a、.c、.e）
不起作用，CSS选择器没有
或
运算符<代码>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预处理器，比如和，它们为您提供了更多的可能性
 
div
类
a
，
c
和
e
可以使用
：第n个子类
伪类进行选择

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

对于给定的标记，这相当于

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

代码开放示例：
div
带有类
a
，
c
和
e
可以使用
：n子类
伪类进行选择

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

对于给定的标记，这相当于

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

Codepen示例：
如果您想明确提到类的名称（例如，
a、b、c
），但不想在源css中重复，那么最好开始使用一些css预处理器，如或。例如，使用Sass，您可以在.scss文件中写入以下内容：

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

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

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

这将保持源文件的干净。
如果您想明确提及类的名称（例如，
a、b、c
），但又不想在源css中重复，那么最好开始使用一些css预处理器，如或。例如，使用Sass，您可以在.scss文件中写入以下内容：

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

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

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

这将保持源文件的干净。
在当前CSS中，没有这样的语法

CSS选择器4，可以进行这样的分组：

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

不幸的是，浏览器还不支持它。Gecko和基于WebKit/Blink的浏览器分别以
：-moz-any（）

但是你可以用CSS预处理器来简化CSS。在当前的CSS中，没有这样的语法

CSS选择器4，可以进行这样的分组：

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

不幸的是，浏览器还不支持它。Gecko和基于WebKit/Blink的浏览器分别以
：-moz-any（）

但是你可以用CSS预处理器来简化CSS。
我确实编辑了我的问题，让它更清晰一些。我只想在一个div下有一组特定的类。它们是
a
、
c
和
e
只是一个随机的例子，或者你需要专门针对这些div？我编辑了我的问题，让它更清楚一些。我只想在一个div下有一组特定的类。是
a
、
c
和
e
只是一个随机示例，还是需要专门针对这些div？