必须用:nth-of-type()精准选第N个某类标签，因其仅对同标签兄弟独立计数；而:nth-child()按所有子元素位置计数，混排时易失效。
要精准选「第 N 个某类标签」，必须用 :nth-of-type()；它按同标签兄弟独立计数，而 :nth-child() 看的是所有子元素的位置——混排结构里，这是根本区别，不是写法偏好。
为什么 p:nth-of-type(3) 能命中，p:nth-child(3) 却失效？
因为 DOM 中第 3 个子元素不一定是 p。比如父容器是：<h2>标题</h2><p>第一段</p><div>附注</div><p>第二段</p><p>第三段</p>：
-
p:nth-child(3)查的是「第 3 个子节点」，那是<div>，不是p，所以不匹配 -
p:nth-of-type(3)只统计所有p兄弟：第一个p是第 1 个，第二个是第 2 个，第三个p（即「第三段」）就是第 3 个，✅ 匹配成功
:nth-of-type() 的参数哪些地方容易写错？
公式 an + b 行为和 :nth-child() 一致，但计数对象不同——它只对同标签兄弟生效。常见误写：
- 写成
.item:nth-of-type(2)→ ❌:nth-of-type完全无视class、id、属性，只认p、div这种标签名 - 写成
p:nth-of-type( 2 )（带空格）→ ❌ CSS 解析器会报错，括号内不能有空格 - 用
odd/even时写成p:nth-of-type(ODD)→ ❌ 必须小写，odd和even是关键字，大小写敏感
混合标签下，:nth-of-type() 怎么配合后代选择器用？
想给「第 2 个 section 里的所有 .card」加样式，不能写 section:nth-of-type(2).card（这表示「第 2 个 section 且自身有 card 类」），而要加空格变成后代关系：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
section:nth-of-type(2) .card { color: red; }这样才表示「位于第 2 个 section 内部（任意嵌套层级）的 .card 元素」。注意：:nth-of-type() 只作用于直接兄弟，不穿透子树；要跨层，必须靠空格或 > 明确关系。
写了却没反应？优先排查这三点
最常被忽略的不是语法，而是 DOM 结构理解偏差：
- 打开开发者工具，看
Computed样式里这条规则是否被更高优先级的选择器覆盖（比如带!important或更具体class的规则） - 手动画 DOM 树，确认你数的「第 N 个」确实是该标签在同类型兄弟中的序号——
div:nth-of-type(2)前面哪怕有 10 个h3、span，它们都不计入，但你得真找到第二个div - 检查伪元素干扰：
<!-- -->、<script>标签不参与计数，但<template>或<slot>在某些浏览器中可能影响，建议先用纯标签结构验证逻辑
真正难的不是语法，而是盯着 DOM 结构脑内分组计数——每次写之前，先默念一遍：“我要选的是第几个 p，不是第几个子元素”。
