对本练习，如果再加一个悬停时使字体颜色改变，为什么不能统一在一个a:hover中声明？
来源：2-20 编程练习
ZFB8672236
2022-08-29 09:57:02
为什么一起声明a:hover，鼠标悬停在被访问后的a标签上不变色？
<!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;
text-decoration: none;
}
.suit a:visited {
color: green;
}
.wc a:visited {
color: blue;
}
.skin a:visited {
color: purple;
}
a:hover {
font-size: 20px;
border: 1px solid red;
color: #ffc0cb;
}
</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>必须要这样分开写？
<!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;
text-decoration: none;
}
.suit a:visited {
color: green;
}
.wc a:visited {
color: blue;
}
.skin a:visited {
color: purple;
}
.suit a:hover {
font-size: 20px;
border: 1px solid red;
color: #ffc0cb;
}
.wc a:hover {
font-size: 20px;
border: 1px solid red;
color: #ffc0cb;
}
.skin a:hover {
font-size: 20px;
border: 1px solid red;
color: #ffc0cb;
}
</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回答
-
同学你好，可以写在一起，但是效果就会不一样，因为此处涉及到了选择器权重问题，会出现覆盖的效果。
同时需要注意一下，
测试效果点击一个链接，所有链接都会变为访问过的状态
是因为a标签此时都是一个地址，为了区分我们可以给后面添加数字，修改参考如下：
祝学习愉快~
0hp style="white-space:normal;">同学你好，是这样理解的，合在一起写会出现选择器的权重问题，最后以权重大的为准，如果分开写权重一样，后面覆盖前面的。
因此会出现不一样的效果
祝学习愉快~
h022-08-29
相似问题