应优先使用 p:nth-of-type(2) 而非 p:nth-child(2)，因后者要求第2个子元素必须是p且受文本节点、注释等干扰，而 nth-of-type 仅按同类型元素计数，更符合“第二段正文”意图。
直接看 DOM 结构，别猜“第几个”
样式没生效，90% 是因为你写的 p:nth-child(2) 想选“第二段正文”，但浏览器看到的是：<div>
<h2>标题</h2>\n<p>第一段</p>
</div>——那个换行符 \n 会生成一个 textNode，让 <p></p> 实际变成第 3 个子元素。p:nth-child(2) 就彻底失效了。
这时候别改选择器公式，先打开开发者工具的 Elements 面板，展开父容器，数清楚：目标元素前面有几个兄弟节点（包括注释、空格、<span></span>、<div>），再决定用哪个伪类。
<ul>
<li>
<code>p:nth-child(n) 要求“第 n 个子节点必须是 p”，位置和类型双重校验
p:nth-of-type(n) 只要“第 n 个 p”，其他全跳过，不计数也不校验<h3>+</h3>
<p>+<time>+<button></button></time></p>）优先试 p:nth-of-type(2)
为什么 article p:nth-child(2) 常常不匹配任何元素
这个写法有严重误解：article p:nth-child(2) 不是“article 下第二层的 p”，而是“article 的直接子元素中，第 2 个子元素要是 p”。如果 article 的子元素是 <header></header> 和 <main></main>，那这个选择器根本不会往下找 p。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
真正想选 article 内部第二个 p，应该用：article p:nth-of-type(2)。它作用域仍是 article 的直接子元素，但会递归收集所有后代 p 吗？不。它只管 article 直接子元素里的 p —— 所以如果你的 p 在 <main></main> 里，那得写成 article main p:nth-of-type(2) 或者用更明确的层级。
- 伪类永远只作用于**直接父元素的子节点**，不跨层
-
section > p:nth-child(2)和section p:nth-child(2)效果一样，都只看 section 的直系子元素 - 想控制嵌套深的元素，要么加中间层级（如
article > section > p:nth-of-type(2)），要么换 JSquerySelectorAll('article p')过滤
tr:nth-child(even) 安全，但 tbody tr:nth-child(even) 可能翻车
表格隔行变色用 tr:nth-child(even) 通常没问题，因为 <tbody> 里大多是连续的 <code><tr>。但一旦插入 <code><tr class="group-header"> 或 <code><tr><td colspan="3">广告</td></tr>，序号就乱了。
这时别硬调公式，试试：tr:not([class]):nth-of-type(even) —— 先排除带 class 的行，再对剩下纯数据行按类型取偶数位。或者更稳妥：tbody > tr[data-role="item"]:nth-of-type(even)，靠属性锚定真实数据行。
-
tr:nth-of-type(even)在有<thead>/<code><tfoot> 的表格里会出问题，因为它们也含 <code><tr>，且属于同级 <li>现代项目建议统一用属性标记（如 <code>data-row="data"），再配合:nth-of-type，比依赖 DOM 顺序可靠得多 - 构建工具压缩 HTML 时可能删掉换行，导致开发环境有效、上线失效 —— 这是
:nth-child最隐蔽的坑
jQuery 里 nth-of-type 不被原生支持
在 jQuery 1.x–3.x 中，$('p:nth-of-type(2)') 会抛错或静默失败，因为它的 Sizzle 引擎不识别这个伪类。你得手动 filter：
$('article p').filter(':eq(1)') // 第二个（索引从 0 开始）
// 或更语义化：
$('article').find('p').eq(1)
而 p:nth-child(2) 在 jQuery 里能用，但依然受 DOM 干扰 —— 所以与其纠结兼容性，不如在 JS 层统一用 .eq() + 显式查询，逻辑更可控。
- CSS 里用
:nth-of-type更稳；JS 里别依赖 CSS 伪类做逻辑判断 - 动态渲染场景（如 Vue/React 列表），用 key 或 data 属性定位比序号更安全
- 真要靠序号，记得检查是否包含服务端注入的 comment 节点或空格文本 —— 它们看不见，但真实参与计数
