请问是否有错误？

<!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:purple;

}

a:hover{

color:green;

font-size:20px;

border:1px solid red;

}

</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>

3颗猫饼干 2019-08-05

源自：CSS选择的艺术 3-23 编程练习

0

收起

2回答

好帮手慕嘟嘟 2019-08-05 17:43:54

同学你好，抱歉老师这边少提出了一个问题哦，

① 链接被访问的时候，鼠标划过字体的颜色要发生变化的，

② 没有实现的原因是，a：hover的权重不够。所以链接被访问之后，鼠标悬停字体的颜色没有改变。

③ 修改成：

效果：

自己动手测试一下吧~

如果还有疑惑,可以在问答区再次提问,我们会继续为你解答的.

如果我的回答帮助了你欢迎采纳,祝学习愉快~

提问者 3颗猫饼干 #1

这样改了之后当鼠标停留在化妆用品上时没有变成绿色是为什么？检查代码是被橘色的给替代了！

2019-08-05 20:11:25
提问者 3颗猫饼干 #2

我重新写了一遍，这样好像就没有错了！ <!DOCTYPE html> <html> <head lang="en"> <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:purple; } a:hover{ font-size:20px; color:green; 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>

2019-08-05 20:23:58
好帮手慕嘟嘟回复提问者 3颗猫饼干 #3

同学你好，老师运行你的代码，鼠标悬停在已经被访问的链接上，文字的颜色没有边成绿色哦。老师上边提示修改类a:hover的权重，请仔细修改哦~

2019-08-06 09:56:50

点开查看后面1条评论

好帮手慕嘟嘟 2019-08-05 17:12:56

同学你好，效果实现的有一点点偏差哦。

① 根据题目要求，当这三个链接分别被访问的时候，每个链接的颜色才会变，而不是访问任意一个，三个链接的颜色一起变哦。

② 分析原因：

如果链接地址相同的，访问一次，后面的会认为已经访问过了，所以三个链接的字体颜色同时发生变化，因此要给每一个链接设置不同的地址才能实现，访问当前的链接字体发生变化，其他链接字体颜色不变。

③ 修改如下：

访问前两个链接的效果：

如果还有疑惑,可以在问答区再次提问,我们会继续为你解答的.

如果我的回答帮助了你欢迎采纳,祝学习愉快~

提问者 3颗猫饼干 #1

好的，明白了！

2019-08-05 17:23:51

相似问题

请教！这是个什么错误

不知道是什么错误

这个错误是什么情况？

关于本阶段最后考试题里，有一道题是不是答案错误？

出现404错误

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号