2-20作业麻烦查看
来源：2-20 编程练习
与民桐乐
2022-05-17 12:25:00
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
p{height:30px;}
/* 不带下划线 */
p.suit a,p.wc a,p.skin a
{text-decoration: none;}
/* 未被访问 颜色橘色 */
a:link{
color: orange;}
/* 当“衣服鞋帽”被访问了，字体颜色变为绿色 */
p.suit a:visited{color: green;}
/* 当“厕所清洁”被访问了，字体颜色变为蓝色 */
p.wc a:visited{color: blue;}
/* 当“化妆用品”被访问了，字体颜色变为紫色 */
p.skin a:visited{color: purple;}
/*悬停 字体变20px 且1个像素的红边框 */
a:hover{
font-size:20px;
border: 1px solid red;}
</style>
</head>
<body>
<h2>商品列表</h2>
<p class="suit">
<a href="#1">衣服鞋帽</a>
</p>
<p class="wc">
<a href="#2">厕所清洁</a>
</p>
<p class="skin">
<a href="#3">化妆用品</a>
</p>
</body>
</html>相关截图：
问题描述：
1、截图中的为什么class=skin 的连接在未被访问不能显示橙色。尝试过几个浏览器
2、关于link使用和复合选择器结合使用不知道有没有哪里特别注意地方。
写回答
1回答
-
好帮手慕小李
2022-05-17
同学你好，解答如下：
1、老师猜测这里同学应该是已经访问过skin下的a链接了，所以导致怎么刷新都会出现颜色是紫色的情况。这里有个小知识点，a标签如果说已经被访问过，那么状态就会一直是被访问后的样式，即便是刷新也还会是被访问后的样式哈。
同学可以尝试重新创建一个html页面，然后将代码复制进去打开看看效果。老师用同学的代码打开页面后是没问题的。如下：
那么也就是说在未被访问的情况下a:link是生效的，同学尝试一下看看。
2、a标签的link、visited在实际开发中几乎不会被用到，但hover的确会常用到，那么针对于符合选择器，要注意的地方就是找到最后作用的对象，比如说hover我们拿同学的代码距离，如只让skin类名下的a标签起到放大字体和加一像素边框的效果。那么如下：
一定分清层级，最后找到hover的主体是谁分清就可以了。
同学自己试试，祝学习愉快！
1
相似问题