:nth-child(n)按所有子元素排序，要求第n个位置的元素是目标标签；:nth-of-type(n)按同类型元素排序，选择该类型中第n个。例如在span、p、span、p结构中，p:nth-child(2)选第一个p（整体第2个），p:nth-of-type(2)选第二个p（p类第2个）。两者计数范围不同：前者是全部子元素，后者仅同类标签。
:nth-of-type 和 :nth-child 都是 CSS 中用于选择特定位置子元素的伪类选择器，但它们的判断逻辑不同，容易混淆。核心区别在于：它们计算“第几个”的依据不一样。
Revid AI
AI短视频生成平台
96 查看详情
:nth-child 按父元素下的所有子元素排序
这个选择器只看元素在父容器中是“第几个孩子”，不关心类型。只要满足位置条件，并且是目标标签，就会被选中。换句话说，它先数位置，再看标签是否匹配。例如：p:nth-child(2) 表示：父元素下的第二个子元素，且这个元素必须是 p 标签，才会被选中。 如果第二个子元素是 div，哪怕它是第二个 p 元素，也不会被选中。
:nth-of-type 按同类型元素排序
这个选择器先筛选出指定类型的元素，然后在这个“同类列表”中按顺序计数。它更关注“这是第几个该类型的元素”。例如：p:nth-of-type(2) 表示：所有 p 类型的子元素中，排在第二位的那个。 即使前面有其他标签（如 div、span），只要它是第二个 p，就能被选中。
举个例子说明区别
假设 HTML 结构如下：
Span 1Paragraph 1
Span 2Paragraph 2
p:nth-child(2)：能选中第一个 p，因为它是父元素的第二个子元素。 p:nth-child(4)：能选中第二个 p，因为它是第四个子元素。 p:nth-of-type(2)：也能选中第二个 p，因为它是第二个 p 类型元素，不管位置是不是第二。 p:nth-child(2) 不会选中第二个 p，因为它不是第二个子元素。
总结关键点
:nth-child(n)：看整体位置。第 n 个子元素必须是你指定的标签。 :nth-of-type(n)：看同类元素中的顺序。是第 n 个该类型元素即可，不管中间穿插了什么。 当元素类型一致且顺序连续时，两者行为可能相同；一旦混用标签，结果就可能不同。基本上就这些。理解清楚“计数范围”是关键。
以上就是css:nth-of-type选择器和nth-child有什么不同的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1043702.html
微信扫一扫 
支付宝扫一扫 
