类选择器和类以选择器开头

Question

我想一个类选择像结合.smart了[attr^=val]选择,他们attr是class一样[class^='test-'].我已经单独测试了每个选择器,它们似乎工作得很好.但是,当它们组合时,它们不能产生所需的结果.

例

您还可以查看Codepen.

/* Works */

[class^='test-'] {
  background: blue;
}
/* Works */

.smart {
  background: yellow;
}
/* Doesn't work */

[class^='test-'].smart {
  background: red;
}

<div class="test-me">
  <p>Should be blue.</p>
</div>
<div class="smart">
  <p>Should be yellow.</p>
</div>
<div class="smart test-me">
  <p>Should have been red, but isn't.</p>
</div>

任何人都可以解释为什么CSS选择器[class^='test-'].smart不起作用,如果可能的话,如何解决问题？

Answer 1

为什么CSS选择器[class^='test-'].smart不起作用

因为您的class属性不是以test-.它始于smart.如果它确实开始test-,像这样:

<div class="test-me smart">
  <p>Should be red.</p>
</div>

那就匹配了.

如何解决问题

当属性不以时开头时,您需要一个额外的选择器test-.如上所述这里:

[class^='test-'].smart, [class*=' test-'].smart {
  background: red;
}

<div class="smart test-me">
  <p>Should be red.</p>
</div>

<div class="test-me smart">
  <p>Should also be red.</p>
</div>