3-17编程练习

3-17编程练习

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <!-- 补充代码 -->

    <style> 

      *{font-family:"微软雅黑";}

      ul,ol{font-size:20px;}

      h3.book ul li{color:green;}

      h3.game ol li{color:blue;}

    </style>

   

</head>

<body>

    <!-- 补充代码 -->

    <h3 class="book">图书排行榜</h3>

      <ul>

        <li>三体</li>

        <li>盗墓笔记</li>

        <li>三生三世十里桃花</li>

      </ul>

    <h3 class="game">游戏排行榜</h3>

      <ol>

        <li>英雄联盟</li>

        <li>DOTA</li>

        <li>魔兽世界</li>

      </ol>

</body>

</html>

请老师检查哪里错误?
为什么颜色设置不对呢?
后代选择器没有写正确吗?


正在回答 回答被采纳积分+1

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

2回答
好帮手慕慕子 2020-08-23 17:48:38

同学你好, 目前还没有讲到兄弟选择器,在后面的css3选择器小节,对于兄弟选择器会有详细的讲解,目前同学参考“慕粉”老师的回答,了解下就可以了。

标题h3和列表ul是兄弟元素,而空格表示后代选择器,h3.book ul li这种写法表示选择h3标题下的ul,html结构中找不到对应的ul,所以无法实现效果,目前可以去掉h3.book,直接通过ul li设置样式即可。示例:

http://img1.sycdn.imooc.com//climg/5f423b4909b9e2c203830358.jpg

同学可以测试理解下,祝学习愉快~

好帮手慕粉 2020-08-21 09:35:18

同学你好,是的,同学的选择器写错了,h3跟ul是兄弟关系,不是父子关系,所以不能用后代选择器,要使用兄弟选择器。修改参考:

http://img1.sycdn.imooc.com//climg/5f3f24c009bb3eff03940248.jpg

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

  • 提问者 慕盖茨9513023 #1
    老师,我们讲到兄弟选择器了吗?
    2020-08-23 16:29:19
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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