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

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

我现在所拥有的：

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;
}

---

您可以删除所有标记

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

---

使用纯CSS，您当前的方法可能是最有效的方法，而不是在所有h标记上设置类

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

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

---

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

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

---

它只会影响直接子对象。

最高效、简洁和具体的选择器应该是：

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

可以认为它会污染您的标记，但就css性能而言，这就是它

至于*选择器，它的性能很差，添加父选择器不会改善这种情况，如下所示

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

撇开最后一句话不谈，IE<8中不支持文章和章节，因此除非使用polyfill，否则这些浏览器不会选择任何样式，但这是JS唯一的方式

：匹配 您可以使用CSS伪类函数对父代和子代进行分组：

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

请注意，在撰写本文时，这仍然是一项实验性技术，因此您可能希望在生产中使用此技术之前查看

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

根据，：matches将来可能重命名为：is:

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

---

你能添加你的html吗？很有趣！类似地，我可以对所有后代使用：aside*而不使用>，对吗？没错。但是你应该记住选择器的优先级——如果pinAside有一些css属性——前面的将被忽略。我不知道为什么我没有看到这一点。我有H5BP的默认Modernizer，这会填充旁白、文章、章节等吗？我想一定是这样，因为我的页面在IE7和IE8中没有正确的样式。是的，Modernizer已经包含了一个类似于其他html5shim/html5shiv库的脚本，所以不需要做任何其他事情！没有评论/争论的反对票总是让我困惑！

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