html - 我可以在 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 的东西(对于这个例子，+ 会被假定为这样运算符(operator))。 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;}