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中,这是不可能的.如果在标题标记上设置了类,则可以使用单个选择器来定位它们.

使用更少的东西,你可以做:

#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 来减少规则数量的跨浏览器方法是通用选择器

#about > *

但这将针对的每个直接子代，#about并且本质上效率低下。

2023 年更新

现在浏览器支持:is伪:where类，因此您可以使用它们，例如：

#about :is(h1, h2, h3) {
  ...
}

小提示，使用 * 作为选择器非常慢，应尽可能避免。CSS 引擎从右到左工作，这意味着引擎将首先匹配任何 * 匹配元素（所有元素），然后检查每个元素是否有 #about 父元素。 (2认同)

Answer 3

选择:is()器应该做你提到的事情。对于你的具体例子

<div id="about">
    <h1>My</h1>
    <h2>Name</h2>
    <h3>Is</h3>

，您可以使用 is() 选择器作为

#about :is(h1,h2,h3) {
  color:red;  //or whatever property you want to add
}

观看此视频了解更多信息。