11

Is there a CSS selector where i can select all anchors with a class containing 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>

I just jumbled up the icon- since i want to check if the css selector can handle all cases.

I want to be able to change the style of all anchors that contains the class icon-*. This code doesn't seem to work.

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

Is Javascript my only option?

4

2 回答 2

22

您使用了不正确的选择器 -a [class]所有锚点都以 aclass作为后代。

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

您想要的是选择所有以该类开头或包含该类的锚- a[class]：

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

jsFiddle 示例在这里。

于 2013-06-05T15:07:34.250 回答
5

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

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

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

于 2013-06-05T15:07:56.713 回答