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

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

正在回答

登陆购买课程后可参与讨论,去登陆

4回答

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

<style type="text/css">
   p{height:30px;}
   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;}

   a:hover{color:green; font-size:20px;border:1px solid red;}
</style>

  • 破晓小哥哥 提问者 #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
提问者 破晓小哥哥 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
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师