嵌套选择器（标题）的分组（CSS）

is there any way to group e.g. all heading selectors that are part of some <div> element and get them any parameter in short ? I mean something like this:

有没有办法分组,例如所有标题选择器都是某些

元素的一部分并简单地获取它们的任何参数?我的意思是这样的:

#content h1, #content h2, #content h3, #content h4, #content h5 { color: green }

in short:

#content h1-h5 { color: green }

3 个解决方案

#1

You can use LESS or SASS to get this functionality.

您可以使用LESS或SASS来获得此功能。

Example of nesting in LESS:

在LESS中嵌套的示例:

#content {
    h1,h2,h3,h4,h5,h6 {
        color: #0f0;
    }
}

#2

You should make a class that you include in each of those elements. I would recommend doing something like .green.

您应该创建一个包含在每个元素中的类。我建议做像.green这样的事情。

#3

if you need to support only modern browser (webkit and gecko) you may use :any pseudoclass

如果您只需要支持现代浏览器(webkit和gecko),您可以使用:任何伪类

#content :any(h1, h2, h3, h4, h5, h6) {
   color: green;
}

see the reference on MDN for the usage with vendor prefixes, but consider that this solution might have some performance penalties:

请参阅MDN上有关供应商前缀使用情况的参考,但请考虑此解决方案可能会有一些性能损失:

Bug 561154 tracks an issue with Gecko where the specificity of :-moz-any() is incorrect. The current (as of Firefox 12) implementation puts :-moz-any() in the category of universal rules, meaning using it as the rightmost selector will be slower than using an ID, class, or tag as the rightmost selector.

错误561154跟踪Gecko的问题,其中:-moz-any()的特异性不正确。当前(从Firefox 12开始)实现将:-moz-any()放在通用规则的类别中,这意味着将它用作最右边的选择器将比使用ID,类或标记作为最右边的选择器慢。

Otherwise, for a wider support and better mantainability, use a CSS preprocessor, like others have suggested

否则,为了获得更广泛的支持和更好的可持续性,请使用CSS预处理器,就像其他人所建议的那样

#1