css - 选择具有 X 类的各种元素

Question

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

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

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

我知道做...

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

会工作，但我正在寻找一种不那么冗长的语法，因为我是一个懒惰的屁股。

score 1 · Accepted Answer

对不起，但纯 css 是不可能的。
它没有语法。

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

当然，也有解决方法。

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

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

还有一些any像
:any(e1, e2, e3).class
但它只在一些最近的浏览器中支持，比如 Firefox 和 chrome beta（我认为，但我可能是错的）

score 1 · Accepted Answer

一些新的浏览器支持:any（-webkit-/-moz-），例如

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

演示（仅在 firefox 上测试）：http ://jsbin.com/IZozOdo/1/ MDN
上的 Futhetr 信息

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

score 0 · Accepted Answer

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

.myclass {
 ...
}

该选择器匹配：

p.myclass, span.myclass,a.myclass等

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

编辑

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

3 回答 3