6

有没有更有效的方法来选择多个父组和后代组？

我现在拥有的：

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

5 回答 5

2

：火柴（）

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

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

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

较旧的浏览器可能需要使用以供应商为前缀的伪类: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 问题 #3258，将来:matches()可能会重命名为:is()：

:is(aside, article, section) :is(p, h1, h2, h3, h4)
于 2018-11-10T01:56:37.853 回答
1

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

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

可能会污染您的标记，但就 CSS 性能而言，就是这样。

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

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

最后一点，aside, article, section在 IE < 8 中不支持，因此这些浏览器不会选择任何样式（除非使用 polyfill，但这是 JS 唯一的方式）

于 2013-02-19T00:10:34.390 回答
1

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

p, h1, h2, h3, h4 {
width: 75%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
}
于 2013-02-18T23:19:15.120 回答
1

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

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

aside, article, section {
  h1, h2, h3, h4 { ... }
}
于 2013-02-18T23:21:45.727 回答
1

如果父母中只有 (p, h1-h4) 你可以这样做：

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

它只会影响直接的孩子。

于 2013-02-18T23:21:50.957 回答