css - 是否可以在有多个类值的地方使用 css 通配符类选择器？

Question

是否有一个 CSS 选择器，我可以在其中选择所有包含 icon-* 类的 anchor

<a class="icon-a icon-large scrollTo" href="#a"></a>
<a class="icon-large icon-b scrollTo" href="#b"></a>
<a class="icon-large scrollTo icon-c" href="#c"></a>

我只是弄乱了图标 - 因为我想检查 css 选择器是否可以处理所有情况。

我希望能够更改包含类 icon-* 的所有 anchor 的样式。此代码似乎不起作用。

a [class^="icon-"], a [class*=" icon-"] {
    text-decoration: none;
    color: #1BA1E2;
}

Javascript 是我唯一的选择吗？

Answer 1

您使用的选择器不正确 - a [class]所有 anchor 都带有 class作为 descendant 。

基本上，从 <a> 下降的任何元素，以类 icon- 开头或包含类将成为目标。

您想要的是选择所有以该类开头或包含该类自身的 anchor - a[class] :

a[class^="icon-"], a[class*=" icon-"] {
   text-decoration: none;
   color: #1BA1E2;
}

jsFiddle example here.