为什么点击一个连接，其他的连接也显示的是访问后的状态
来源：3-23 编程练习
汪琳果儿
2019-07-24 15:08:38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
p{height:30px;}
a{text-decoration: none;}
a:link{color:orange;} /*未访问状态*/
.suit a:visited{color:green;}
.wc a:visited{color:blue;}
.skin a:visited{color:black;}
a:hover{font-size:20px;border: 1px solid red}/*鼠标悬浮状态*/
a:active{color:orange;}/*激活状态*/
</style>
</head>
<body>
<h2>商品列表</h2>
<p class="suit">
<a href="#">衣服鞋帽</a>
</p>
<p class="wc">
<a href="#">厕所清洁</a>
</p>
<p class="skin">
<a href="#">化妆用品</a>
</p>
</body>
</html>
1回答
-
好帮手慕慕子
2019-07-24
同学你好， 因为几个链接的href值是一样的， 浏览器会缓存已经访问的链接地址哦，所以点击一个链接之后，其他的链接都是访问后的状态
建议：
（1）可以给链接设置不同的href值，保证点击链接不影响其他连接的样式
（2）另， 由于选择器的权重，导致激活状态设置的样式不生效，可以给链接的父元素添加一个相同类名，增加鼠标悬浮和激活的CSS选择权重
（3）练习要求鼠标悬停的时候字体颜色为绿色， 可以设置在hover下添加color属性
同学可以自己下去在测试一下
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0
相似问题