Question

是否有CSS选择器，我可以选择包含图标的所有锚点 - *

<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选择器是否可以处理所有情况。

我希望能够更改包含类图标的所有锚点的样式 - *。这段代码似乎不起作用。

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

Javascript是我唯一的选择吗？

Answer 1

您使用了错误的选择器 - a [class]是class作为 descendant 的所有锚点。

基本上，任何以<a>为序的元素都会以icon-开头或包含类a[class]为目标。

你想要的是选择所有以自己开始或包含该类的锚点 - a[class^="icon-"], a[class*=" icon-"] { text-decoration: none; color: #1BA1E2; }：

{{1}}

jsFiddle example here.

Answer 2

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

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

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

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

2 个答案: