css - 如何有效地选择多个 CSS 父子组

Question

有没有更高效的方法来选择多个父子组？

我现在拥有的:

aside p, aside h1, aside h2, aside h3, aside h4,
article p, article h1, article h2, article h3, article h4,
section p, section h1, section h2, section h3, section h4 {
  width: 75%;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
}

Answer 1

:匹配()

您可以使用 :matches() CSS 伪类函数对你的 parent 和后代进行分组:

:matches(aside, article, section) :matches(p, h1, h2, h3, h4)

请注意，在撰写本文时，这仍是一项实验性技术，因此您可能需要查看 browser compatibility在生产中使用它之前。

旧版浏览器可能需要使用供应商前缀的伪类:any():

:-moz-any(aside, article, section) :-moz-any(p, h1, h2, h3, h4),
:-webkit-any(aside, article, section) :-webkit-any(p, h1, h2, h3, h4),
:matches(aside, article, section) :matches(p, h1, h2, h3, h4)

根据 CSSWG issue #3258 , :matches() 将来可能会重命名为 :is():

:is(aside, article, section) :is(p, h1, h2, h3, h4)