CSS - 是否可以在父项中选择多个不同的子元素而不重复父项？

Question

我整个下午一直在争取CSS选择器试图找到答案，因为它看起来很简单，但我不能为我的生活找到任何解决方案。

给出类似于以下的结构：

<div id="about>
    <h1></h1>
    <h2></h2>
    <h3></h3>
</div>

我想使用一个选择器使所有标题成为特定于该分区的不同字体。

我的选择器通常是：

#about h1,
#about h2,
#about h3 {
}

现在看来效率低下。有没有办法整理ID？

#about h1 + h2 + h3 (incorrect)

有类似的东西：

#about (h1,h2,h3)

我觉得这应该是显而易见的，但我从未见过这样的选择。

Answer 1

在纯CSS中，这是不可能的。如果您在标题标记上设置了一个类，则可以使用单个选择器来定位它们。

使用类似less的内容，您可以执行以下操作：

#about {
  h1, h2, h3 { ... }
}

Answer 2

要完成Guffa答案，如果您不能使用服务器端预处理而且您只需要定位Firefox和Chrome，那么您也可以使用

:-moz-any( selector[, selector]* )
:-webkit-any( selector[, selector]* )

在你的情况下，你将以这种方式使用这个伪类

#about :-moz-any(h1, h2, h3) { ... }

否则唯一不使用less或sass减少规则数量的crossbrowser方法是通用选择器

#about > *

但是这会针对#about的每个直接孩子，而且本质上效率低下。