css有关nth-child与nth-of-type的区别

最新推荐文章于 2023-06-30 17:24:14 发布

huo_le

最新推荐文章于 2023-06-30 17:24:14 发布

阅读量208

点赞数

分类专栏：前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/huo_le/article/details/79027127

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        div{
            border: solid 1px blue;
        }
        span{
            display: block;
            border: solid 1px green;
        }
        p{
            border: solid 1px red;
        }
        div > span:nth-child(1),div > span:nth-child(3),div > span:nth-child(5){
            background: green;
        }
        div > p:nth-of-type(1),div > p:nth-of-type(2),div > p:nth-of-type(3){
        background: red;
    }
    </style>
</head>
<body>
<div>
    <span>span</span>
    <p>p</p>
    <span>span2</span>
    <p>p2</p>
    <span>span3</span>
    <p>p3</p>
</div>
</body>
</html>

效果如下：

:nth-child选择器:

选择在其父元素内，与:nth-child()前相符合类型元素的子元素。

例如：div > span:nth-child(1)，选择的是在div中，是span元素类型的第一个子元素；div中的第二个子元素是p元素，如果改成div > span:nth-child(2),它将选择不到元素。

:nth-of-type选择器:

选择与:nth-type-of()前相符合类型元素的第几元素。

例如：div > p:nth-type-of(1)，选择的是在div中，元素类型为p元素的第一个元素。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。