css选择器:nth-child和:nth-of-type之间的差异

最新推荐文章于 2024-10-19 11:09:56 发布

ZPD_zpd

最新推荐文章于 2024-10-19 11:09:56 发布

阅读量199

点赞数

文章标签： css

本文链接：https://blog.csdn.net/ZPD_zpd/article/details/112964011

版权

本文详细介绍了CSS选择器:nth-child()和:nth-of-type()的用法及区别。通过示例解释了它们在不同场景下的渲染效果，强调了当存在非目标标签时，两者选择元素的不同之处。 nth-child()关注元素在所有子元素中的位置，而nth-of-type()则只关注同类型元素的位置。

摘要由CSDN通过智能技术生成

两个都是伪类选择器，效果近似，但又不同。

例1：HTML部分

<div class="cl1">
    <p>第一个p标签</p>
    <p>第二个p标签</p><!-- 想要这个变色 -->
</div>
<div class="cl2">
    <p>第一个p标签</p>
    <p>第二个p标签</p><!-- 想要这个变色 -->
</div>

css部分

.cl1 p:nth-child(2){
    color: red;
}
.cl2 p:nth-of-type(2){
    color: red;
}

上面例子中实现效果一致，都做到了将第二个p标签变色
在这里插入图片描述

尽管效果相同，但两个选择器存在差异

p:nth-child(2)表示：
1、查找段落标签
2、查找父元素第二个标签
第二个p标签正好满足1、2条件，p标签并且是父元素的第二个标签

p:nth-of-type(2)表示：
父元素的第二个p标签
第二个p标签正好满足条件

上面的例子正好满足条件，下面换个例子：

例2：HTML部分

<div class="cl1">
	<span>这是一个span标签</span>
    <p>第一个p标签</p>
    <p>第二个p标签</p><!-- 想要这个变色 -->
</div>
<div class="cl2">
	<span>这是一个span标签</span>
    <p>第一个p标签</p>
    <p>第二个p标签</p><!-- 想要这个变色 -->
</div>

css部分

.cl1 p:nth-child(2){
    color: red;
}
.cl2 p:nth-of-type(2){
    color: red;
}

这时渲染出来的效果就不同了

在这里插入图片描述
可以看到css条件相同但是效果却不同了

p:nth-child(2)渲染的不是第二个p标签了，而是第一个p标签。

因为对于p:nth-child(2)表示这个元素要是p标签，且是第二个子元素，是两个必须满足的条件。于是，就是第一个p标签变色。如果在span标签后面再添加一个span标签，这时p:nth-child(2)将不再渲染标签。
在这里插入图片描述
而p:nth-of-type(2)表示父标签下的第二个p元素，显然，无论在span标签后面再插入几个span标签，还是其他标签，都是第二个p标签中的文字变红。