为什么a[href~="###"]的时候无效？
来源：2-7 属性选择器
Ecomools
2018-02-04 23:25:39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
a[href~="###"]{
text-decoration: none;
}
a[href="###"]{
color: #f00;
}
</style>
<body>
<a href="atr.html">attribute</a>
<a class="one two" href="###">text</a>
<a class="one two" href="###1">text</a>
<a href="###2">text</a>
<a href="###3">text</a>
<a href="###4">text</a>
</body>
</html>写回答
2回答
-
Tsuki_tsuki
2018-02-05
我试了一下，感觉是这样的：虽然课上讲a[href~="###"]和a[href*="###"]都是包含，但是匹配的精度不一样。
a[href~="###"]
a[href~="###"]是和下面的完全匹配才能出效果，前面后面不会多字符也不会少字符，就像这样：<a class="one two" href="###">text</a>。
<a class="one two" href="###1">text</a>这个在匹配的时候，#后面多了一个1，所以不是完全匹配，也就不会产生效果。
a[href*="###"]
a[href*="###"]这种是和下面的模糊查找匹配，只要完整的找到这串字符就可以。
例如a[href*="#"]，所有包含#的href属性都可以产生相应效果；
如果设置a[href*="#1"]，那么只要含有“#1”的都可以（#和1是一个整体，不能分开）
<a class="one two" href="###1">text</a>、<a class="one two" href="##1#">text</a>、、<a class="one two" href="#1##">text</a>都符合条件。
0 -
小于飞飞
2018-02-05
[attribute~=value]，是指属性中必须包含value的单独单词，不能是单词的一分部。所指“无效”是指什么情况，祝学习愉快。
0
相似问题