0
点赞
收藏
分享

微信扫一扫

H5 day07

Xin_So 2022-03-25 阅读 49
html

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

        /* 选中所有li元素,如果这个li元素是父元素中的第一个li类型的子元素 就匹配成功 */

        /* li:first-of-type{

            color: red;

        } */

        /* 选中所有span元素,如果这个span元素是父元素中的最后一个span类型的子元素 就匹配成功 */

        /* span:last-of-type{

            color: blue;

            font-weight: bold;

        } */

        /* 选中所有p元素,如果这个p元素是父元素中的顺数第二个p类型的子元素 就匹配成功 */

        /* p:nth-of-type(2){

            color: green;

        } */

        /* 选择父元素中为2 */

        p:nth-of-type(2n){

            color: yellow;

            font-weight: bolder;

        }

    </style>

</head>

<body>

    <div>div1111111111111111</div>

    <li>li11111111111111</li>

    <li>li22222222222222222222</li>

    <li>li333333333333333333333333333333</li>

    <div>

        <div>div2222222222222222222222222222222</div>

        <p>p11111111111111111111111</p>

        <p>p22222222222222222222222222222</p>

        <div>div3333333333333333333</div>

        <span>span11111111111111111111111</span>

        <div>

            <p>p3333333333333333333333333333333333333333333333</p>

            <span>span2222222222222222222222222</span>

            <p>p4444444444444444444444444</p>

            <span>span33333333333333333333333333333333333</span>

            <li>li5555555555555555555555555555555555555</li>

        </div>

    </div>

    <p>p5555555555555555555</p>

</body>

</html>

举报

相关推荐

Day07

Java Day07

day07数组

微服务day07

Java学习-Day07

**day07 - Web APIs**

java基础 Day07

面向对象day07

JavaSE learning day07

0 条评论