关于权值问题
来源：3-24 编程练习
舟渡
2018-02-13 22:16:12
之前练习的时候实现了题目的效果，但是hover标签在点击链接过后就失去了其表达效果。看了另一位同学作业下面的解答过后，修改了hover标签的写法，提高了优先级，这样点击过后依然能表达出效果了。
这是以前的式子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
p{height:30px;}
a{text-decoration:none;}
p a:link{color:orange;}
p.suit a:visited{color:green;}
p.wc a:visited{color:blue;}
p.skin a:visited{color:purple;}
p a:hover{color:green;font-size:20px;border:1px solid red;}
/*补充代码*/
</style>
</head>
<body>
<h2>商品列表</h2>
<p class="suit">
<a href="http://www.baidu.com">衣服鞋帽</a>
</p>
<p class="wc" >
<a href="http://www.imooc.com">厕所清洁</a>
</p>
<p class="skin">
<a href="http://www.sina.com">化妆用品</a>
</p>
</body>
</html>
这是修改过后的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
p{height:30px;}
a{text-decoration:none;}
p a:link{color:orange;}
p.suit a:visited{color:green;}
p.wc a:visited{color:blue;}
p.skin a:visited{color:purple;}
p.hv a:hover{color:green;font-size:20px;border:1px solid red;}
/*补充代码*/
</style>
</head>
<body>
<h2>商品列表</h2>
<p class="suit hv">
<a href="http://www.baidu.com">衣服鞋帽</a>
</p>
<p class="wc hv" >
<a href="http://www.imooc.com">厕所清洁</a>
</p>
<p class="skin hv">
<a href="http://www.sina.com">化妆用品</a>
</p>
</body>
</html>
有一点疑问就是：链接伪类的顺序是否在实现以前，是遵照：link＞：visited＞：hover＞：active的，只要顺序写对了，就能够实现效果；而在点击激活了过后，再次将鼠标悬停在链接上，计算机就会优先考虑优先级别较高的式子先表达出来，而忽略hover的某些效果？（之所以说是某些效果，是发现color属性是被visited中的color属性覆盖了，而{border:1px solid red；}属性因为前面没有相同的属性值，所以还是可以表达出来）
换着写法试了好几次，但是感觉对于这个规则还是有点晕0-0.虽说应用中保持优先级一致就ok了，不过还是想知道一下出现这种情况的原理是什么。
1回答
-
点击a链接之后再移入，此时就有两个状态，被访问和移入，每个都有color属性，此时计算机就会比较权重优先级问题，比较之后就会显示优先级高的。这是浏览器解析机制的问题。自己可以再理解一下！~~
0
相似问题