css - 我需要重复选择器的常见部分还是有更好的方法？

Question

我想要类似以下的东西（比如 a ||）：

[.pw-each-placecomment or .pw-each-usercomment] h2 { }

这可能吗？

Answer 1

现在不是纯 CSS。Firefox 引入了 non-standard :any()，但它是实验性的，并且仅在 Firefox、Chrome 和 Safari 中。它可能会成为:matches()，所以请密切关注它。

如果您不使用 CSS 预处理器，例如 SASS、Stylus、LESS 等，那么您将很难走运。

你必须把它们都列出来。

.pw-each-placecomment h2,
.pw-each-usercomment h2 {

}

Answer 2

您可以使用属性选择器。

^（克拉）符号表示字符串的开头（这里是类名的开头）：

div[class^="pw-each-"] h2 {  
   color: red;  
}

小提琴

这将选择具有以“pw-each-”开头的类名的祖先 div 的任何 h2 元素

例如： pw-each-placecomment 和 pw-each-usercomment - 将匹配......但是

pw-other-other 或 other-pw-each-placecomment- 不会。

有关此选择器（以及一般选择器）的更多信息 - 我推荐这篇文章