具有相邻类限制的css匹配选择器

Question

当我想匹配一个特定的类 my-class-b 时，它在同一元素上也有另一个类 my-other-class-a 我可以做

.my-class-b.my-other-class-a {
}

此外，当我想通过部分类名进行匹配时，我可以使用

[class^="my-class-"] {
}

现在我想混合使用两者，但似乎行不通。我该怎么办

[class^="my-class-"].my-other-class-a {
}

Answer 1

发生这种情况是因为在 css 选择器 [class^="abc"] 中测试了以指定类开头的类属性。

如果选择器是

[class^="my-"]

然后

class="my-class red"

不等于

class="red my-class"

查看http://jsfiddle.net/u5sfge94/

解决此问题的一种方法是指定一个充当 [class^="abc"] 的新类。它可能会使您的样式表更有条理，您的代码更清晰，CSS 渲染速度更快。