识别多个类的 CSS 速记

Question

我读了this tutorial关于在 CSS 选择器中使用正则表达式并试图推断:是否有 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 提出了一个新的 :matches()基于 Mozilla 原始 :any() 实现的伪类(请参阅 this answer 了解一些历史):

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

当然，不要指望浏览器支持它。到时候我什至可能会忘记更新这个答案，但是......我们拭目以待。