为什么改变了<a href=“#”> 这个标签的颜色也改变了

破晓小哥哥 2018-03-24

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

收起

4回答

慕粉3989962 回答被采纳获得+3积分 2018-03-25 21:51:27

这个和href中的url改变与否是没有关系的，这个是因为你将效果直接作用在p标签上，正确的应该是作用在p标签的子元素a标签上，具体写法参考如下，你可以测试下。

收起回答

破晓小哥哥提问者 #1

我去试试，非常感谢

2018-03-25 21:55:27
破晓小哥哥提问者 #2

a:link｛color:orange｝改变了href的ual值，这个没有生效。

2018-03-26 08:18:07
慕粉3989962 回复提问者破晓小哥哥 #3

试过没，我这边是可以的呢。：link表示未访问状态时的状态，这里是橙色的。

2018-03-26 09:05:11

点开查看后面1条评论

提问者破晓小哥哥 2018-03-25 15:47:38

<!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;} 
            p.suit:visited{color:green;}
            p.wc:visited{color:blue;}
            p.skin:visited{color:purple;}
            a:hover{color:green; 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>

收起回答

提问者破晓小哥哥 2018-03-25 15:44:09

<!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;} p.suit:visited{color:green;} p.wc:visited{color:blue;} p.skin:visited{color:purple;} a:hover{color:green; 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>

收起回答

好帮手慕糖 2018-03-25 14:25:41

你好，建议：可以将你的代码粘贴上来便于大家测试与解决问题，另：具体描述下是指哪个变化了颜色哦。详细的描述问题需求，便于大家更加准确的解决问题哦。

祝学习愉快~

收起回答

提问者破晓小哥哥 #1

图片上不是有代码。。。吗

2018-03-25 14:41:28
提问者破晓小哥哥 #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;} p.suit:visited{color:green;} p.wc:visited{color:blue;} p.skin:visited{color:purple;} a:hover{color:green; 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>

2018-03-25 15:41:12
提问者破晓小哥哥 #3

如果<a href="#3">化妆用品</a> <a href="#2">厕所清洁</a> <a href="#1">衣服鞋帽</a> href的值三个写成一样的样式无法不起作用

2018-03-25 15:48:58