麻烦老师验证正误

麻烦老师验证正误

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
           /*此处写代码*/
           ul > li > ol > li:first-child{
               color:#f00;
           }
           ul > li > ol > li:last-child{
               color:green;
           }
           ul > li > ol > li:nth-child(3){
               color:blue;
           }
        </style>
    </head>
    <body>
            <ul>
                <li>
                    <ol>
                        <li>冰箱</li>
                        <li>洗衣机</li>
                        <li>空调</li>
                    </ol>
                </li>
                <li>
                    <ol>
                        <li>洗衣液</li>
                        <li>消毒液</li>
                        <li>洗厕液</li>
                    </ol>
                </li>
                <li>
                    <ol>
                        <li>奶粉</li>
                        <li>纸尿裤</li>
                        <li>奶瓶</li>
                    </ol>
                </li>
            </ul>
    </body>
</html>

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

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

2回答
Steve007 2019-01-24 10:31:25

同学,你好。有如下问题:

  1. last-child表示最后一项,这里应该设置蓝色。第二项用nth-child(2)来设置,设置成绿色。

    如图:

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

2.建议给每个分类写上分类名称。如图:

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

祝学习愉快!

好帮手慕星星 2019-01-24 10:28:51

你好,代码中少了每一个分类的标题,以及每一类的第二项字体颜色没有变为绿色:

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

是代码中设置样式冲突了:

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

使用last-child与nth-child(3)这两个选择的是相同的元素,所以后面的样式覆盖了前面的,缺少一个中元素的样式,可以修改为:

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

每一个分类的标签可以在ul下面的li中添加:

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

自己可以完善下,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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