css3中nth-child选择器和nth-of-type选择器的区别

最新推荐文章于 2022-01-10 11:48:23 发布

仕女狂

最新推荐文章于 2022-01-10 11:48:23 发布

阅读量413

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/fanzh90/article/details/52087507

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

:nth-child可以选择父元素下的子元素，:nth-of-type也可以。但是它们也有区别？

其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：e:nth-of-type(n)是指父元素下第n个e元素，

而e:nth-child(n)是指父元素下第n个元素且这个元素为e，若不是，则选择失败。

代码如下

<style>
        /*选中的是<span>11</span>*/
        /*div span:nth-child(3){ color:red;}*/

        /*选中的是<span>33</span>*/
        div span:nth-of-type(3){ color:red;}
    </style>
</head>
<body>
    <div>
        <p>55</p>
        <p>55</p>
        <span>11</span>
        <span>22</span>
        <span>33</span>
        <span>44</span>

    </div>
</body>

：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

仕女狂

关注关注

0
点赞
踩
0

收藏

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

代码如下style> /*选中的是11*/ /*div span:nth-child(3){ color:red;}*/ /*选中的是33*/ div span:nth-of-type(3){ color:red;} style>head>body> div> p>55p>
复制链接

扫一扫