我可以在 CSS 中对子元素进行分组吗？

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 3就不用说了 次？

现在，您设想的分组实际上并不存在。但是由于您的问题是关于减少 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;
}

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