Question

假设我有一个像这样的小HTML区域：

<div id="somecontainer">
   <h1>text</h1>
   <h2>text</h2>
   <h3>text</h3>
   <p>text</p>
</div>

现在我想用CSS设置该容器的几个子元素。目前我这样做，但它看起来比它可能更复杂：

#somecontainer h1,#somecontainer h3,#somecontainer p { color:red; }

有没有什么方法可以为CSS代码“分组”这些子元素，所以我不必三次提到容器ID #somecontainer？

我想像是一个类似于运算符的运算符，它会使语法变成类似#somecontainer h1+h3+p的东西（对于这个例子，+将被假定为此运算符）。 CSS中有这样的东西吗？

Answer 1

使用纯CSS，这将针对#somecontainer的所有直接孩子：

#somecontainer > *

然后你可以恢复你在H2上设置的任何东西。例如

#somecontainer > * {color: red;}
#somecontainer > h2 {color: black};

但它并不是一种特别有效的写作方式。我会坚持明确地编写类，或者理想地使用像Less或Sass这样的预处理器，你可以写下这个：

#somecontainer {
    h1, h3, p {
        color: red;
    }
}

将输出你最终想要的东西，这个 -

#somecontainer h1 {color: red;}
#somecontainer h3 {color: red;}
#somecontainer p {color: red;}

Answer 2

这是你的核心问题：

有没有什么方法可以为CSS分组这些子元素代码，所以我不必提及容器ID #somecontainer三次？

现在，您想象的分组并不存在。但是因为你的问题是关于减少CSS代码，特别是跨多个元素类型，那么这正是CSS中 classes 的要点 - 可以应用于多个元素，但只有一个， CSS中的简洁表示。有时在尝试做出精彩的选择时，我们忘记了CSS的简单性。

因此，基于其容器可能仍然可以更改值的某种通用类可能是。然后，您可以选择使用该类来设置元素中的一个或另一个，具体取决于您可能需要设置的数量。这就是我的意思：

选项1（更多HTML更改，更少CSS代码）

<强> HTML

<div id="somecontainer">
   <h1 class="setColor">text</h1>
   <h2>text</h2>
   <h3 class="setColor">text</h3>
   <p class="setColor">text</p>
</div>

<强> CSS

#somecontainer .setColor {
  color: red;
}

选项2（更少的HTML更改，更多的CSS）

<强> HTML

<div id="somecontainer">
   <h1>text</h1>
   <h2 class="setColor">text</h2>
   <h3>text</h3>
   <p>text</p>
</div>

<强> CSS

#somecontainer {
  color: red;
}

#somecontainer .setColor {
  color: black;
}

这里的重点是样式的“分组”正是类的意思。如果您决定将另一个元素切换为该颜色，则添加该类。