:nth-of-type仅按同标签兄弟在DOM中的原始位置计数，不穿透嵌套、不跳过隐藏元素、不看class，错误使用即无效；最常见失效原因是误判“第一个”元素的实际DOM位置。
:nth-of-type 能修布局 Bug，但前提是它真选中了你想控制的那个元素——它不看 class、不跳过隐藏元素、也不按视觉顺序数，只忠实地按同标签兄弟在 DOM 中的原始位置计数。写错就等于没写。
为什么 :nth-of-type(1) 明明写了却没反应
最常见原因是：你以为的“第一个”不是它眼里的“第一个”。比如父容器是 <header></header><p>intro</p><div><p>content</p></div>，那么 p:nth-of-type(1) 匹配的是 <p>intro</p>，而不是 <div> 里面的那个 p——因为后者不在同一级父容器下，压根不参与这次计数。
- 它只作用于**直接子元素**，不穿透嵌套层级
- HTML 注释、换行缩进产生的文本节点不影响计数，但
<script>、<template>等标签会打断同类型序列 - 哪怕元素被
display: none或visibility: hidden隐藏，仍参与计数 - 在 DevTools 的 Elements 面板里手动展开父节点，挨个数
<p>标签出现顺序，比凭感觉靠谱得多
:nth-of-type(n) 和 :nth-child(n) 到底该用哪个
关键看你的 DOM 是否混排。如果父容器里全是 <li>，那两者效果一致；一旦夹了 <div>、<h3> 或注释，差别就出来了：
-
li:nth-of-type(2)：只数<li>，第 2 个<li>就是它，不管前面有几个其他标签 -
li:nth-child(2)：数所有子元素，要求“第 2 个子节点恰好是<li>”，否则不匹配 - 表格中常见陷阱：
tr:nth-of-type(odd)写在<table>下，实际会跨<thead>和<tbody>计数——但它们的tr不是同级兄弟，真正生效的是tbody tr:nth-of-type(1)这类带作用域的写法
后代选择器里空格漏掉，样式就全废
想给「第 3 个 <section> 里的所有 .hero」加背景色，必须写成：
立即学习“前端免费学习笔记（深入）”；
section:nth-of-type(3) .hero { background: #f0f0f0; }
漏掉中间空格，写成 section:nth-of-type(3).hero，浏览器会当成“一个同时是 <section> 标签、又带 hero 类的元素”，而你目标元素其实是 <div class="hero">，根本对不上。
-
>（子选择器）只匹配直接子级，如果.hero藏在<article>里面，它就失效 -
:is()或:where()可组合条件，但兼容性有限（:is(section:nth-of-type(3) .hero)在 Safari 16.4+ 才稳定） - React/Vue 动态渲染时，
v-if或key导致某些<section>消失，序号可能整体漂移——这时靠伪类不如 JS 主动加data-index="3"
真正难的不是语法，是你得在脑内把父容器下所有同名标签单独拎出来排队，再数第几个。DOM 一变，队列就重排；框架一插，队列就断档。别让它承担关键布局逻辑，尤其当结构来自 CMS 或 SSR 渲染时。
