有没有办法缩短 CSS 选择器？答案

【问题标题】：Is there a way to shorten css selectors?有没有办法缩短 CSS 选择器？
【发布时间】：2014-07-31 07:00:54
【问题描述】：

我有：

#signUpForm h1, #signUpForm p{
    color: #fff;
}

有没有办法缩短这个例如：

#signUpForm h1, p{
    color: #fff;
}

或者我是否需要像我的第一个示例一样每次都创建一个新的逗号分隔选择器？

【问题讨论】：

【解决方案1】：

你有没有想过使用 Sass，你可以做类似的事情

#signUpForm{ 
    h1, p {
        color: #fff;
    } 
}

【讨论】：

【解决方案2】：

这取决于您指定的属性和您想要定位的元素，如果它与color 相关，那么您可以编写

#signUpForm {
    color: #fff;
}

因为color 属性将被h1 和p 继承，但是考虑一个您想应用font-weight 的场景，所以在这里您不能使用上面的选择器，因为font-weight 不会由h1标签继承。

如果需要，您可以使用 CSS 预处理器，如 LESS 或 SASS，您可以在其中编写类似

#signUpForm {
    h1, p {
       font-weight: 100;
    }
}

但同样，正如我所说，这取决于你正在编写的属性，因为有些是由子元素继承的，有些不是，所以即使你使用color like

#signUpForm {
    h1, p {
       color: #fff;
    }
}

没有意义，因为它等同于 #signUpForm { color: #fff; }，除非您为 h1 或 p 指定了不同的 color

【讨论】：

【解决方案3】：

使用:any。

#signUpForm :any(h1,p) { }

浏览器支持各不相同。您可能需要做-webkit-any 等。

【讨论】：

好主意，但您对浏览器支持是正确的。谢谢！
请注意，使用伪也会影响选择器的特异性
由于前缀，使用:any() 毫无意义 - 请参阅stackoverflow.com/questions/10753174/… 此外，它是一个伪类，而不是伪元素。
@Mr.外星人：它不应该 - :matches() 的特殊性是任何选择器与元素匹配。伪类不计入，类似:not()。
the-echoplex.net/csscrush 支持:any。您可以在浏览器支持更好之前一直使用它，而无需喝掉所有 LESS/SASS Kool-aid。