CSS用于标识多个类的简写

Question

我在使用CSS选择器的正则表达式时阅读了this tutorial，并试图推断：是否有CSS速记来执行以下操作？我想选择具有“foo”类的所有div，它们具有附加类“a”，“b”，“c”或“d”。

    .foo.a,
    .foo.b,
    .foo.c,
    .foo.d {
       /* stuff */
    }

类似的东西：

.foo[class~='a','b','c','d'] {}？

Answer 1

目前不可能（使用Selectors 3推荐）。 CSS没有完整的正则表达式语法，也没有办法压缩多个选择器列表的部分内容。

选择器4根据Mozilla的原始:any()实现提出了一个新的:matches()伪类（请参阅this answer了解一些历史记录）：

.foo:matches(.a, .b, .c, .d)

当然，不要指望浏览器支持这个。我可能会忘记在那个时间到来时更新这个答案，但是......我们会看到。

Answer 2

也许.foo[class~='a'][class~='b'][class~='c'][class~='d']？

Answer 3

不，你的第一种写作方式是正确的方法。您只能使用属性选择器搜索一次匹配，因此最接近两种方法的是：

.foo[class~="a"],
.foo[class~="b"],
.foo[class~="c"],
.foo[class~="d"] {
   /* stuff */
}

这真的不是速记或任何东西：P按类选择的最佳方法是使用.className的普通方法。属性选择器仅对选择其他属性非常有用，或者如果您有一个以某个单词开头且使用css3的类。例如，您可以使用以下内容：

.foo[class^="mah-class"]{ }

哪个匹配mah-class-a mah-class-b mah-classAHHH ...等