a标签的伪类不按顺序写也不会有什么问题啊，为什么要按顺序书写
来源：2-20 编程练习
Ben897504
2021-03-06 19:20:37
////////////////////////////////////////////// :hover写在：visited后面
<!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>Document</title>
<style type="text/css">
/*补充代码*/
a {
text-decoration: none;
}
a:link {
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>
<h2>商品列表</h2>
<p class="suit">
<a href="https://baidu.com" target="blake">衣服鞋帽</a>
</p>
<p class="wc">
<a href="https://www.imooc.com" target="blake">厕所清洁</a>
</p>
<p class="skin">
<a href="https://youdao.com" target="blake">化妆用品</a>
</p>
</body>
</html>
////////////////////////////////////////////////////////// :hover写在：visited前
<!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>Document</title>
<style type="text/css">
/*补充代码*/
a {
text-decoration: none;
}
a:link {
color: orange;
}
a:hover {
font-size: 20px;
border: 1px solid red;
}
.suit a:visited {
color: green;
}
.wc a:visited {
color: blue;
}
.skin a:visited {
color: purple;
}
</style>
</head>
<body>
<h2>商品列表</h2>
<p class="suit">
<a href="https://baidu.com" target="blake">衣服鞋帽</a>
</p>
<p class="wc">
<a href="https://www.imooc.com" target="blake">厕所清洁</a>
</p>
<p class="skin">
<a href="https://youdao.com" target="blake">化妆用品</a>
</p>
</body>
</html>
1回答
-
好帮手慕久久
2021-03-07
同学你好，解答如下：
伪类不按照顺序写，会造成某些伪类的样式不生效。同学的例子，代码需要调整一下：
让样式的选择器统一，这样才能准确测试（目的是让选择器权重一样，后面的课程会讲到权重，暂时了解一下）：
hover写在visited后面（按照顺序写）：
由于“衣服鞋帽”和“厕所清洁”是访问过的，而“化妆用品”是未访问过的，此时样式如下：
从截图可以看出，初始时每个a的样式都是正确的。
当鼠标移入时，每个a的样式也都正常如下：
当hover写在visited前（不按照顺序写）：
初始状态下，“衣服鞋帽”的颜色就不正确：
应该是绿色的。
当鼠标移入“厕所清洁”后，“厕所清洁”的颜色也不正确，字体没有变粉色：
综上，a的伪类要按照顺序写，否则会有某些样式（比如颜色）不生效。
祝学习愉快！
0
相似问题