nth-of-type和nth-child的区别

最新推荐文章于 2022-07-04 17:37:52 发布

骑着毛驴的小猴子

最新推荐文章于 2022-07-04 17:37:52 发布

阅读量278

点赞数 1

分类专栏： css html

本文链接：https://blog.csdn.net/weixin_31765427/article/details/74275739

版权

css 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            li:nth-of-type(1) {
                color: red;
            }

        </style>
    </head>

    <body>
        <menu>
            <div>中国</div>
            <li>1</li>
            <li>0</li>
        </menu>
    </body>

</html>

li:nth-of-type(n)是从li开始计数，分别为1，2
这里写图片描述

nth-of-type()的参数还可以是odd 和even 其中odd是指奇数个 even指偶数
这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            li:nth-child(even) {
                color: red;
            }

        </style>
    </head>

    <body>
        <menu>
            <div>中国</div>
            <li>1</li>
            <li>0</li>
        </menu>
    </body>

</html>

在以上代码中，li:nth-child(n)是从div开始计数，分别为1，2,3
这里写图片描述
同样，nth-child()的参数也可以是odd 和even

优惠劵

骑着毛驴的小猴子

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nth-of-type和nth-child的区别

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> li:nth-of-type(1) { color: red; } </style> </h
复制链接

扫一扫