css伪类:nth-of-type与:nth-child有何不同_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css伪类:nth-of-type与:nth-child有何不同

2025-10-09

浏览次数：次

返回列表

:nth-child 以位置为核心，选择父元素下第n个子元素且必须匹配指定标签；:nth-of-type 以类型顺序为核心，选择同标签中第n个。例如在混合子元素中，p:nth-child(2) 要求第二个子元素是p，而 p:nth-of-type(2) 只需是第二个p标签，无论整体位置。

css伪类:nth-of-type与:nth-child有何不同

:nth-of-type 和 :nth-child 都是 CSS 中的结构伪类，用于选择父元素下的特定子元素，但它们的匹配逻辑有本质区别。理解它们的不同，关键在于“选择依据是什么”。

:nth-child 以位置为中心

这个伪类关注的是：目标元素是否位于父元素的第几个子元素位置上，而不关心它本身的标签类型。

也就是说，:nth-child(n) 会从父元素的第一个子元素开始数，只要位置符合 n（可以是数字、公式或关键字），就选中该位置的元素，前提是这个元素存在且满足前面的元素类型条件（如果有指定）。

比如：

p:nth-child(2) 表示：父元素的第二个子元素，并且它必须是一个
标签，才会被选中。
如果第二个子元素是，即使后面有多个
，这个选择器也不会命中任何元素。

:nth-of-type 以类型和顺序为中心

这个伪类关注的是：当前元素在其父元素中，是同类型标签中的第几个。它会忽略其他类型的兄弟元素，只统计相同标签的出现顺序。

换句话说，:nth-of-type(n) 会先筛选出所有同类型的兄弟元素（如所有

），然后从中选出第 n 个。
例如：
- p:nth-of-type(2) 表示：在所有
  标签中，选择第二个出现的，不管它在父元素中整体排第几位。
- 即使前面有几个或
  ，只要它是第二个
  ，就会被选中。
  
  实际对比示例
  
  假设有如下 HTML 结构：
```
<div>
  <h1>标题</h1>
  <p>第一段</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2356">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176118961795973.png" alt="青泥AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2356">青泥AI</a>
                            <p>青泥学术AI写作辅助平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="青泥AI">
                                <span>360</span>
                            </div>
                        </div>
                        <a href="/ai/2356" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="青泥AI">
                        </a>
                    </div>
                
  <span>辅助内容</span>
  <p>第二段</p>
</div>
```
  - p:nth-child(2)：选中第一个
    ，因为它是父元素的第二个子元素，位置匹配。
  - p:nth-child(4)：不会选中第二个
    ，虽然它是第四个子元素，但 :nth-child(4) 要求第四个子元素是
    
    ，而这里第四个确实是
    
    ，所以能匹配。
  - p:nth-of-type(2)：选中第二个
    ，因为它是所有
    
    中的第二个，无论位置如何。
  - p:nth-child(3)：无法匹配任何元素，因为第三个子元素是，不是
    。
  核心区别总结
  - :nth-child 看的是“位置” —— 第几个孩子，是不是我要的标签。
  - :nth-of-type 看的是“同类中的顺序” —— 同类标签中排第几。
  - 当子元素类型混杂时，两者结果可能完全不同。
  基本上就这些，关键在于理解“child”是按位置算，“of-type”是按标签类型分组后再算顺序。