带有连字符/破折号的CSS选择器

Question

在下面的代码中，我想选择所有具有以＆＃34开头的类名的元素; bg-client＆＃34;

<span class="bg-client">Lorem ipsum</span>
<span class="bg-client_a">Lorem ipsum</span>
<span class="bg-client_b">Lorem ipsum</span>
<span class="bg-client_c">Lorem ipsum</span>

我试过了，但它没有用

[class^="bg-client"] {}
[class^="bg\2Dclient"] {}
[class^="bg\u002Dclient"] {}

任何帮助？

Answer 1

我自己找到了答案

我认为^=选择器会占用class=""中的每个类，并检查是否从选择器开始。但是我错了。它会检查class=""的最开头。

实际上我的代码看起来更像是：

<span class="foo bar bg-client">Lorem ipsum</span>
<span class="foo bar bg-client_a">Lorem ipsum</span>
<span class="foo bar bg-client_b">Lorem ipsum</span>
<span class="foo bar bg-client_c">Lorem ipsum</span>

这有效：

[class^="bg-client"], [class*=" bg-client"] {}