3-15作业审批

来源:3-15 编程练习

web前端高级开发工程师

2021-08-03 20:46:28

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box1 li:first-child{colorred;}

        .box2 li:first-child{colorred;}

        .box3 li:first-child{colorred;}


        .box1 li:nth-child(2){colorgreen;}

        .box2 li:nth-child(2){colorgreen;}

        .box3 li:nth-child(2){colorgreen;}


        .box1 li:last-child{colorblue;}

        .box2 li:last-child{colorblue;}

        .box3 li:last-child{colorblue;}

    </style>

</head>

<body>

    <ul>

        <li class="box1">

            家用电器

            <ol>

                <li>冰箱</li>

                <li>洗衣机</li>

                <li>空调</li>

            </ol>

        </li>

    </ul>


    <ul>

        <li class="box2">

            清洁用品

            <ol>

            <li>洗衣液</li>

            <li>消毒剂</li>

            <li>洗厕液</li>

            </ol>

        </li>

    </ul>


    <ul>

        <li class="box3">

            妇婴用品

            <ol>

            <li>奶粉</li>

            <li>纸尿裤</li>

            <li>奶瓶</li>

            </ol>

        </li>

    </ul>

</body>

</html>

相关截图:

http://img.mukewang.com/climg/61093aa20998ec6305060764.jpg

写回答

1回答

好帮手慕慕子

2021-08-04

同学你好,效果实现是对的,建议优化:

将ol作为父选择器,统一设置样式,简化代码书写,示例:

http://img.mukewang.com/climg/6109f05f092b9df511240680.jpg

祝学习愉快~

1

0 学习 · 17877 问题

查看课程

相似问题