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

您可以删除所有标记特异性。

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

Answer 2

使用纯CSS，除了在所有h标签上设置类之外，您当前的方式可能是最有效的方法。

使用LESS，您可以执行以下操作：

aside, article, section {
  h1, h2, h3, h4 { ... }
}

Answer 3

如果父母中只有（p，h1-h4），你可以这样做：

aside > *, article > *, section > * {
width: 75%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
}

它只会影响直接的孩子。

Answer 4

性能最高，最简洁，最具体的选择器就是：

.selector {
    width: 75%;
    padding: 15px 0;
    margin: 0 auto;
    text-align: center;
}

可能会发现它会污染你的标记，但从纯粹的css表现来看就是这样。

关于*选择器，其效果很差，添加父选择器不会改善情况，因为illustrated here

样式系统通过从键选择器开始匹配规则，然后向左移动（在规则的选择器中查找任何祖先）。只要选择器的子树继续检出，样式系统就会继续向左移动，直到它与规则匹配，或者由于不匹配而放弃。

最后一句话，IE＆lt;＆lt; 1＆gt;中不支持aside, article, section 8所以这些浏览器不会选择任何样式（除非使用了polyfill，但这只是JS的一种方式）

Answer 5

：matches（）

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

: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)

如何有效地选择多个CSS父级和子级组

5 个答案:

：matches（）