是否可以使用css通配符类选择器,其中有多个类值？

Question

是否有一个CSS选择器,我可以选择所有锚点,其中包含一个包含icon-*的类

<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-*的所有锚点的样式.这段代码似乎不起作用.

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

Javascript是我唯一的选择吗？

Answer 1

你使用了一个不正确的选择器 - a [class]所有的锚class都是一个后代.

基本上,任何<a>以a开头或包含该类的元素icon-都将成为目标.

你想要的是选择自己开始或包含该类的所有锚- a[class]:

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

这里是jsFiddle的例子.

Answer 2

是 - 但您首先需要删除类型选择器和属性选择器之间的空格以及属性值中的空格:

a[class^="icon-"], a[class*="icon-"] {
text-decoration: none;
color: pink; /* get rid of the # */
}

http://jsfiddle.net/c8YdD/1/