关于Element[attribute~="value"]选择器的疑问

我写的attribute2和tingyu2那里出现其他的颜色，还不是全部一起变颜色，一部分是黑色，一部分是蓝色，效果图和代码如下：

```

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Attribute</title>
<style type="text/css">
a {
display: block;
width: 200px;
margin-bottom: 20px;
}
a[href] {
text-decoration: none;
}
a[href="#"] {
color: #008B45;
font-size: 26px;
}
a[class~="two"] {
color: #f00;
}
</style>
</head>
<body>
<a href="attribute.html">Attribute</a>
<a href="#">Attribute1</a>
<a href="#">tingyu1</a>
<a href="#1">Attribute2</a>
<a href="#2">tingyu2</a>
<a href="#3">tingyu2</a>
<a href="#4">Attribute2</a>
<a href="#5">tingyu2</a>
<a href="#6">Attribute2</a>
<a href="#7">tingyu2</a>
<a class="one two" href="#">Attribute3</a>
<a class="two three" href="#">tingyu3</a>
</body>
</html>

```

听羽 2016-12-19

源自：CSS3选择器 2-7 属性选择器

收起

2回答

vampire小奇 2017-02-07 16:57:53

首先确定下来你截图效果里面有4种颜色:蓝色、绿色、紫色、红色.

那么默认a标签里,在没设置颜色的时候默认颜色是蓝色,

然后点击那个默认的蓝色字体，点击后那个蓝色字体就会变成紫色,

Attribute1和tingyu1的href都是#，那么他们都是绿色，因为代码里设置过:

 a[href="#"] {
        color: #008B45;
        font-size: 26px;
 }

Attribute3和tingyu3的class都包含单词two,那么他们都是红色，因为代码里设置过:

a[class~="two"] {
    color: #f00;
}

收起回答

小丸子爱吃菜 2016-12-19 21:56:20

这个代码中：

（1）a标签的默认颜色是蓝色

（2）a[href="#"] {
color: #008B45;
font-size: 26px;
}

上面的代码中，选取了带有指定属性href和值位#的元素，又将除了第一个链接的所有链接字体颜色设置为：#008B45；

（3）a[class~="two"] {
color: #f00;
}

上面的代码中，选取了属性值中包含指定词汇two的元素，又将最后两个带有类选择器two的链接字体颜色设置为：#f00；

你须清楚，代码的执行顺序是从上到下，如果这个元素设置了相同的属性，那么后面设置的样式会覆盖前面的样式！

祝学习愉快！

收起回答

提问者听羽 #1

不好意思，现在才回复，大概明白你所说的，但是有一点我不明白，就是为什么会有黑色？

2016-12-21 09:37:55
小丸子爱吃菜回复提问者听羽 #2

你说的是黑色是哪个部分有黑色，因为我测试你的代码，字体没有黑色的。

2016-12-21 11:11:08
提问者听羽回复小丸子爱吃菜 #3

就是tingyu1下面的那三行代码 <a href="#1">Attribute2</a> <a href="#2">tingyu2</a> <a href="#3">tingyu2</a>

2016-12-21 11:13:25