麻烦老师看下这四种方式是否可以 代码是否有改进的地方 谢谢

来源:3-24 项目作业

dww1

2021-06-16 01:00:26

<!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>

        /* 序号选择器 */

        p:nth-of-type(odd){

           colorred;

        }

        p:nth-of-type(even){

            colorgreen;

        }

        /* 属性选择器 */

        p[class="red"]{

            colorred;

        }

        p[class="green"]{

            colorgreen;

        }

        /* 复合选择器 */

        ul{

            list-stylenone;

        }

        ul li{

            colorred;

        }

        ul li.g{

            colorgreen;

        }

        /* 元素关系选择器 */

        .box>p{

            colorred;

        }

        p+.g{

            colorgreen;

        }

    </style>

</head>

<body>

    <h3>序号选择器</h3>

    <p class="red">我是红色的</p>

    <p class="green">我是绿色的</p>

    <p class="red">我是红色的</p>

    <p class="green">我是绿色的</p>

    <p class="red">我是红色的</p>

    <p class="green">我是绿色的</p>


    <h3>属性选择器</h3>

    <p class="red">我是红色的</p>

    <p class="green">我是绿色的</p>

    <p class="red">我是红色的</p>

    <p class="green">我是绿色的</p>

    <p class="red">我是红色的</p>

    <p class="green">我是绿色的</p>


    <div>

        <h3>复合选择器</h3>

        <ul>

            <li>我是红色的</li>

            <li class="g">我是绿色的</li>

            <li>我是红色的</li>

            <li class="g">我是绿色的</li>

            <li>我是红色的</li>

            <li class="g">我是绿色的</li>

        </ul>

    </div>

    <div class="box">

        <h3>元素关系选择器</h3>

        <p>我是红色的</p>

        <p class="g">我是绿色的</p>

        <p>我是红色的</p>

        <p class="g">我是绿色的</p>

        <p>我是红色的</p>

        <p class="g">我是绿色的</p>

    </div>

</body>

</html>


写回答

1回答

好帮手慕星星

2021-06-16

同学你好,这四种方式都是正确的,很棒哦,不需要修改。

祝学习愉快!

0

0 学习 · 15276 问题

查看课程