CSS3伪类选择器有哪些_常用nthchildfirstchild用法【介绍】

:nth-child和:nth-of-type行为不同：前者按子元素位置匹配，后者按同类型元素顺序匹配；:first-child与:first-of-type同理，一字之差可能导致完全不匹配。

为什么 :nth-child(n) 经常“选不到”你想要的元素？

它只认「位置」，不认「类型」：:nth-child(2) 意思是“父元素下的第二个子元素”，然后才判断这个子元素是不是你写的标签名。如果第二个子元素是 h2，而你写的是 p:nth-child(2)，那这条规则完全不生效。

• 常见错误现象：给 ul 写了 li:nth-child(2)，但第二项没变色——检查一下 ul 开头有没有注释、空格、或意外插入的 div
• 适用场景：父元素下所有子元素类型一致（如纯 li 列表），且你关心的是视觉顺序位置
• 参数本质：n 从 0 开始代入公式，2n+1 等价于 odd，3n 表示第 3、6、9…个位置（不是第 3、第 6 个 li）

:nth-of-type(n) 才是你真正需要“找第 n 个 li”的解法

它先筛出所有同类型元素（比如全部 p），再按它们在父元素中出现的顺序编号，:nth-of-type(2) 就是“第二个 p”，不管它前面隔着几个 h3 或 div。

• 典型使用场景：文章正文里混排标题、段落、图片，你想让“第三个段落”加粗，就得用 p:nth-of-type(3)
• 和 :nth-child 权重相同（都是 10），但逻辑完全不同；切勿当成同义词互换
• 兼容性无顾虑：IE9+ 全支持，现代项目可放心用

:first-child vs :first-of-type：一字之差，结果可能全空

假设父容器是：

<article>
  <h2>标题</h2>
  <p>第一段</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/1846" title="Ribbet.ai"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/000/000/175680382214336.jpg" alt="Ribbet.ai"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/1846" title="Ribbet.ai">Ribbet.ai</a>
                                                                        <p>免费在线AI图片处理编辑</p>
                                                                </div>
                                                                <a href="/ai/1846" title="Ribbet.ai" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
  <p>第二段</p>
</article>

• p:first-child → 不匹配任何元素（因为第一个子元素是 h2）
• p:first-of-type → 匹配“第一段”（它是第一个 p）
• h2:first-child → 成功匹配（h2 正好是第一个子元素）
• 同理，:last-child 和 :last-of-type 行为对称，但含义不可互换

隔行变色这种“刚需”，到底该用哪个？

绝大多数情况下，用 :nth-child(even) 最稳妥——前提是你的列表结构干净（如纯 tr 或纯 li）。但如果表格里插了 thead、tfoot 或额外 tr class="divider"，就会错位。

• 纯 tbody > tr 结构 → tbody > tr:nth-child(even)
• 含 thead 的表格 → 改用 tbody > tr:nth-of-type(even)（只数 tbody 下的 tr）
• 想跳过首行标题 → tr:nth-child(n+2)（从第 2 个子元素开始选），不是 tr:nth-child(2n)