关于伪类顺序的问题
来源：2-16 选择练习
江舟
2021-04-17 23:06:54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo Classes</title>
<style>
a:link{
color:orange;
}
a:visited{
color:green;
}
a{
text-decoration: none;
}
div a:hover{
font-size: 30px;
color: aliceblue;
}
p a:hover{
font-weight: 800;
}
a:active{
color:orange;
}
.suit a:visited{
color: green;
}
.wc a:visited{
color: blue;
}
.skin a:visited{
color:purple;
}
a:hover{
font-size: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<a href="http://www.imooc.com">click me</a>
</div>
<p>
<a href="http://www.baidu.com">search</a>
</p>
<p class="suit">
<a href="#">衣服鞋帽</a>
</p>
<p class="wc">
<a href="#">厕所清洁</a>
</p>
<p class="skin">
<a href="#">化妆用品</a>
</p>
</body>
</html>
在css3选择器2-16练习中，对链接伪类顺序有如下叙述：
链接伪类的顺序，a:hover必须置于a:link和a:visited之后，才有效，a:active必须在a：hover之后，才有效。而link、visited两个伪类之间顺序无所谓，谁在前都可以。
然而上述代码中存在:hover放置在:link和:visited之前的情况，但是该样式依旧有效。
从问答区里看到有老师解答说如果hover写在link和visited之前，使用hover再去修改字体颜色（link和visited都设置了字体颜色），是不会生效的。
上述代码中div a:hover改变了字体颜色，却依旧生效。
我的理解是链接伪类顺序是对于某个特定链接生效的，如果该特定链接的链接伪类顺序符合规范，则样式生效。不知道这样的理解是否正确。
我还存在一个疑问，上述代码中了div的a链接同时具有div a:hover以及a:hover的样式，是否可以说明伪类的样式不会覆盖，而是合并？
写回答
1回答
-
同学你好，解答如下：
1、在同学的代码中，hover是放在link和visited之后的。
2、如果改为下方，那么字体颜色还是可以生效的，原因在hover时，选择器的权重比较高。
如果选择器的权重改为一样的，那么hover时设置的字体颜色将会不生效，如下：
3、一般常用的顺序为如下：
4、相同的样式会覆盖，不同的样式会合并，例如：都设置了字体大小，div a:hover选择器的权重比较高，所以字体大小生效的是30px，字体颜色和边框样式都可以显示。
祝学习愉快~
0
相似问题