:nth-of-type(1)只匹配同标签名兄弟元素中第一个，不考虑其他类型节点或视觉顺序；如父元素内有p、div、p，则第二个p是:nth-of-type(2)，首个p才是:nth-of-type(1)。
为什么 :nth-of-type(1) 有时不生效
它只认「同类型标签」的顺序，不是你在 DOM 里看到的第一个子元素。比如父容器里先有 <p></p>，再有 <div>，又一个 <code><p></p>，那第二个 <p></p> 是 :nth-of-type(2)，第一个才是 :nth-of-type(1)——哪怕它前面有个 <div>。
<p>常见错误现象：<code>ul > li:nth-of-type(1) 想加粗首个 li，结果没反应？检查父 ul 里是否混了注释、文本节点或 <script></script> 标签——这些不影响 :nth-of-type 计数，但如果你误以为“第一个子元素”就是它，就踩坑了。
- 只对同标签名的兄弟元素计数，忽略其他类型节点
- 不区分是否被
display: none或visibility: hidden隐藏（仍参与计数） - 和
:first-child不等价：后者要求必须是父元素的第一个子节点，且类型不限
:nth-of-type(1) 和 :first-child 怎么选
看你要锚定的是「类型内序号」还是「位置优先级」。比如表格中想让每行第一个 <td> 加边框，用 <code>tr > td:nth-of-type(1) 安全；但若想确保某容器里最顶上的那个元素（不管是不是 <div>）有特殊样式，就得用 <code>:first-child。
- 用
:nth-of-type(1)：目标明确是某类标签的首个实例，如article > h2:nth-of-type(1) - 用
:first-child：要修饰视觉上最靠前的那个子元素，且它恰好是你要的标签，如.card > img:first-child - 两者都失效？可能是父元素用了
flex或grid，子项被重新排序，此时 CSS 伪类仍按源顺序计算，和渲染顺序不一致
在真实项目里怎么写才不容易翻车
别单独依赖 :nth-of-type(1) 做关键样式控制，尤其涉及 JS 动态插入或 SSR/SSG 渲染场景。服务端生成的 HTML 和客户端 hydrate 后结构可能微调，导致第 n 个类型偏移。
- 加一层 class 锚点更稳，比如给首个
<section></section>手动加class="first-section"，再写.first-section { margin-top: 0; } - 配合
:not()排除干扰，如article > *:not(script):nth-of-type(1)可跳过内联脚本 - 注意浏览器兼容性：
:nth-of-type在 IE9+ 支持，但 IE9 对复合选择器支持弱，避免写成div#main > p:nth-of-type(1)这种长链
调试时怎么看它到底选中了谁
打开 DevTools，在 Elements 面板里右键目标元素 → “Break on” → “Attribute modifications”，然后手动增删同类型兄弟节点，观察样式是否随数量变化而开关——这是验证 :nth-of-type 行为最直接的方式。
- 在 Styles 面板里，如果该规则灰掉，说明没匹配到任何元素；亮起但没生效，大概率是权重被更高优先级样式覆盖
- 用
document.querySelector('p:nth-of-type(1)')在 Console 里试，返回null就说明当前 DOM 里没有满足条件的p - 移动端 Safari 对某些嵌套过深的
:nth-of-type解析有延迟，别在关键首屏样式里用太复杂的组合
