选择具有 X 类的各种元素答案

【问题标题】：Select various elements that have X class选择具有 X 类的各种元素
【发布时间】：2013-10-22 16:06:12
【问题描述】：

只有当它们具有特定类时，是否可以更改 X 数量的元素（h1、p、span...）？我正在寻找这样的东西：

(elem1, elem2, elem3, elem4).class {
  /* do things here */
}

以前我尝试使用括号、大括号和方括号，并且 curly 似乎可以工作，但快速浏览一下 Firefox 的控制台检查器似乎告诉我它忽略了括号开头和结尾之间的所有内容，当然可以，但是会也适用于div，而不是p、span、hX。

我知道这样做...

elem1.class, elem2.class, elem3.class, elem4.class {
  /* do things here */
}

可以，但我一直在寻找一种不那么冗长的语法，因为我是个懒人。

【问题讨论】：

【解决方案1】：

抱歉，纯 CSS 无法实现。
只是没有语法。

e1.class, e2.class, e3.class 尽可能短。

当然，有解决方法。

有一个扩展名为sass
用 sass 你可以写

e1, e2, e3 {
    &:hover {
        /* Some stuff */
    }
}

还有any，其工作方式类似于
:any(e1, e2, e3).class
但它仅在一些最新的浏览器中支持，如 firefox 和 chrome beta（我认为，但我可能错了）

【讨论】：

【解决方案2】：

部分新浏览器支持:any (-webkit-/-moz-)，例如

:any(elem1, elem2, elem3 ...).yourclass {
   color: green;
}

演示（仅在 Firefox 上测试）：http://jsbin.com/IZozOdo/1/
关于MDN的更多信息

否则考虑有机会像其他人之前建议的那样使用 CSS 预处理器

【讨论】：

此时使用带有前缀的 :-*-any() 没有意义，因为 1) it just creates even more repetition because of prefix parsing rules 2) 无论如何它都会变成 :matches()。

【解决方案3】：

我一定是误解了这个问题，因为你为什么不直接使用没有标记名的类选择器，例如：

.myclass {
 ...
}

该选择器匹配：

p.myclass、span.myclass、a.myclass 等

只需将标签名称从选择器中移除即可。

编辑

正如在对此答案的评论中向我指出的那样 - 如果您不想包含某些标记名，那么您要么 a) 使用您不喜欢的详细语法，要么 b) 在您确实想要定位的元素 (http://jsfiddle.net/Mm9HX/) - 这就是 CSS 类的用途。

【讨论】：