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属性[class^="abc"].

如果选择器是

[class^="my-"]

然后

class="my-class red"

是不一样的

class="red my-class"

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

解决此问题的一种方法是指定一个充当[class ^ ="abc"]的新类.它可能会使您的样式表更有条理,您的代码更易读,而且css渲染速度更快.

Answer 2

前一个答案中对@juank的解释是正确的:你编写类的顺序很重要,因为^代表值的开头.

但也有使用许多其他的属性选择的正则表达式表示法:^=,*=并$=给予特别保护.RESP.开始于,任何地方和结束与匹配.
如果您希望您的选择器匹配包含my-class可能位置的类,则应使用*=(请参阅代码段1).
但是它也会匹配任何不是从头开始my-class但仍包含它的类.为了避免这种情况,您可以像以前一样进行^=匹配,也可以匹配[class*=" my-class"](使用空格):它会考虑不是第一个用class属性值写的类的情况(参见Snippet 2) .

资源: CSS3.info中的CSS3子串匹配属性选择器(最后链接到REC CSS 3级选择器)

小片1:

[class*='my-class'].my-other-class-a {
  background-color: lightgreen;
}

<div class="my-class-a my-other-class-a">Should match 1</div>
<div class="my-class-b my-other-class-a">Should match 2</div>
<div class="my-other-class-a">Nope</div>
<div class="my-other-class-a my-class-a">Should match 3</div>
<div class="my-other-class-a my-class-b">Should match 4</div>
<div class="whatever my-other-class-a my-class-a">Should match 5</div>
<div class="other my-other-class-a my-class-b">Should match 6</div>
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>

摘录2:

[class^='my-class'].my-other-class-a,
[class*=' my-class'].my-other-class-a {
  background-color: lightgreen;
}

<div class="my-class-a my-other-class-a">Should match 1</div>
<div class="my-class-b my-other-class-a">Should match 2</div>
<div class="my-other-class-a">Nope</div>
<div class="my-other-class-a my-class-a">Should match 3</div>
<div class="my-other-class-a my-class-b">Should match 4</div>
<div class="whatever my-other-class-a my-class-a">Should match 5</div>
<div class="other my-other-class-a my-class-b">Should match 6</div>
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>

Answer 3

这并不完全是防弹的，但只要你的“变量”类是第一个，这就可以工作：

div[class^='my-class'][class~='my-other-class-a'] {
  background-color: red;
}

<div class="my-class-a my-other-class-a">Hello</div>
<div class="my-class-b my-other-class-a">World</div>
<div class="my-other-class-a">Bye</div>