显示不了链接的绿色,而且我的hover属性显示不出。这是怎么回事

显示不了链接的绿色,而且我的hover属性显示不出。这是怎么回事

代码如下,如果我把链接link属性写成绿色,下面不加ul li a{color:green;}就显示不了链接的绿色,而且我的hover属性显示不出。这是怎么回事

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>CSS运用</title>

<style type="text/css">

  *{font-size:20px;}

  .top-foot{

      width:100%;

      background-color:gray;

      font-size:30px;

  };

  /*a:link{color:green;}*/


  a:hover{color:blue;}

  p span{

      font-size:27px;

      color:blue;

  }

  .gray{color:gray;}

  ul li,ul li a{color:green;}

  #orange li{color:orange;}

  ol li{color:red;}

</style>

</head>

<body>

<div class="top-foot">慕课网</div>

<div>

    <div>

<p><span>HTML超文本标记语言</span>,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。</p>

<p class="gray">课程内容</p>

<ul>

<li><a href="#">html基础标签</a>

<ol>

<li>段落标签</li>

<li>图像和超链接标签</li>

<li>列表标签</li>

</ol>

</li>

<li>html表格标签</li>

<li>html表单标签</li>

</ul>

</div>

<div>

<p><span>CSS层叠样式表</span>(Cascading Style Sheets),样式定义如何显示HTML元素。</p>

<p class="gray">课程内容</p>

<ul>

<li><a href="#">CSS基础语法</a></li>

<li>CSS使用方法

<ol>

<li>行内样式</li>

<li>内部样式</li>

<li>外部样式</li>

</ol>

</li>

<li>CSS选择器

<ul id="orange">

<li>ID选择器</li>

<li>class选择器</li>

<li>标签选择器</li>

</ul>

</li>

</ul>

</div>

</div>

<div class="top-foot">慕课网 只学有用的</div>

</body>

</html>


正在回答

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

3回答

我之前说你重读是指的嵌套的太多,你没有分清,为了让你缕的更清给你写了一个比较明确的参考。你写的代码问题就在于

下面第12行大括号后面多了个分好“;”,去掉之后a:link就有效了,因为你本身设置的是绿色,你换成别的颜色就看出来效果了。以后一定要细心一点,祝学习愉快!

http://img1.sycdn.imooc.com/climg//59670f9d00015c4505680397.jpg

  • 错过花殇 提问者 #1
    谢谢~已经可以了
    2017-07-13 15:04:15
好帮手慕糖 2017-07-13 11:10:02

你好,hover不显示,是因为a嵌套的标签太多,没有找到它,建议添加上父级元素,例ul li a:hover{color:red;}  在我这里绿色也是可以显示的,样式代码如下,可以参考下:

*{font-size:20px;}
  .top-foot{
      width:100%;
      background-color:gray;
      font-size:30px;
  };
  p span{
      font-size:27px;
      color:blue;
  }
  .gray{color:gray;}
  ul li,ul li a{color:green;}
  #orange li{color:orange;}
  ol li{color:red;}
  ul li a:hover{color:red;}

祝学习愉快!

  • 提问者 错过花殇 #1
    你好,我把a:link{color:green;}a:hover{color:blue;}放在p span{color:blue;}这段代码的后面,就可以显示链接绿色和悬浮蓝色,但是放在之前就显示不出是怎么回事
    2017-07-13 11:32:38
  • 好帮手慕糖 回复 提问者 错过花殇 #2
    你好,我这里放在上边也是可以哟。a:link可能原因是你已经访问过这个链接了,建议清楚下浏览器记录,或者换个浏览器试一下。你的.top-foot{}后有一个分号“;”建议去掉;祝学习愉快!
    2017-07-13 11:57:42
  • 提问者 错过花殇 回复 好帮手慕糖 #3
    啊?为什么我这边不可以?我用的火狐 是浏览器问题吗
    2017-07-13 11:59:22
Miss路 2017-07-13 11:03:40

你重复设置的东西太多了,没有捋顺关系,我把你的冲洗能改了一下,你应该能缕清了,参考下面的代码:


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>CSS运用</title>

  <style type="text/css">

      #top-foot{background-color:#acacac;font-size:30px;}

      #main{background-color:#ececec;font-size: 16px;}

      #footer{background-color:#acacac;font-size: 30px;}

      p span{font-size:20px; color:blue;}

      #content1 .one,#content2 .one{color:gray;}

      ul li{color:green;}

      ol li{color:red;}

      #content2 ol li{font-size:12px;}

      ul li ul li{color:orange;}

      a:link{color:green;}

      #content1 a:hover{color:blue;}

      #content2 a:hover{color:red;}

  </style>

</head>

<body>

<div class="top-foot">慕课网</div>

<div id="main">

    <div id="content1">

    <p><span>HTML超文本标记语言</span>,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。</p>

    <p class="one">课程内容</p>

    <ul>

      <li><a href="#">html基础标签</a>

        <ol>

          <li>段落标签</li>

          <li>图像和超链接标签</li>

          <li>列表标签</li>

        </ol>

      </li>

      <li>html表格标签</li>

      <li>html表单标签</li>

    </ul>     

  </div>

  <div id="content2">

    <p><span>CSS层叠样式表</span>(Cascading Style Sheets),样式定义如何显示HTML元素。</p>    

    <p class="one">课程内容</p>

    <ul>

      <li><a href="#">CSS基础语法</a></li>

      <li>CSS使用方法

        <ol>

          <li>行内样式</li>

          <li>内部样式</li>

          <li>外部样式</li>

        </ol>

      </li>

      <li>CSS选择器

        <ul class="two">

          <li>ID选择器</li>

          <li>class选择器</li>

          <li>标签选择器</li>

        </ul>

      </li>

    </ul>     

  </div>

</div>

<div id="footer">慕课网 只学有用的</div>  

</body>

</html>

祝学习愉快!

  • 提问者 错过花殇 #1
    你好,我没怎么重复设置啊 不好意思没看出来
    2017-07-13 11:33:41
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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