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

Question

有没有办法分组，例如所有标题选择器都是某些<div>元素的一部分并简单地获取它们的任何参数？我的意思是这样的：

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

简而言之：

#content h1-h5 { color: green }

Answer 1

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

在LESS中嵌套的示例：

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

Answer 2

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

Answer 3

如果您只需要支持现代浏览器（webkit和gecko），可以使用:any伪类

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

请参阅reference on MDN了解供应商前缀的用法，但请注意此解决方案可能会有一些性能损失：

  

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

否则，为了获得更广泛的支持和更好的可持续性，请像其他人一样使用CSS预处理器