:first-child不生效是因为它要求元素既是父元素第一个子元素又类型匹配，而前面的注释、空格等会破坏条件；:first-of-type更可靠，只关注同类型中首个出现的元素。
为什么 :first-child 有时不生效
常见现象是给 对标准无干扰的列表结构， 当列表被 JS 动态渲染、或 CSS 用 这两个看似等价，但行为不同： 立即学习“前端免费学习笔记（深入）”； 真正卡住的时候，往往不是选择器写错了，而是 DOM 结构比想象中更“松散”——多一行换行、一个未闭合标签、一段服务端注入的空格，都可能让 ul li:first-child 写了样式，但第一项没变——很可能因为列表项前面有其他元素（比如注释、空格文本节点、或意外插入的 li 并非父容器的「第一个子元素」。:first-child 匹配的是「父元素下排第一且类型匹配的子元素」，不是「同类元素中排第一的那个」。
ul 下第一个子节点是不是你预期的 li
）或换行产生的空白文本节点，:first-child 就会失效:first-of-type 更鲁棒：它只关心「同类型元素中的第一个」，忽略其他类型节点
:first-of-type 是更安全的选择:first-of-type 行为更符合直觉。它不依赖兄弟节点类型，只要当前元素是其标签类型在父容器中首次出现，就命中。ul li:first-of-type {
font-weight: bold;
background-color: #f0f8ff;
}
ul / ol / dl 等任何含 li 或 dt/dd 的上下文:first-child 一致li（比如嵌套列表里的），它仍只选最外层第一个需要精确控制「可视第一行」时怎么办
display: none / visibility: hidden 隐藏了部分项，:first-of-type 和 :first-child 都无法感知「可见性」。这时必须靠 JS 或预处理逻辑。
ul li:not([hidden]):not(.hidden):first-of-type（前提是隐藏是通过属性或 class 控制）document.querySelector('ul li:not(.hidden)')?.classList.add('first-visible');别忽略
:nth-child(1) 和 :nth-of-type(1)的区别:nth-child(1) 和 :first-child 完全等效；而 :nth-of-type(1) 和 :first-of-type 等效。关键在于「child」数所有子节点，「of-type」只数同标签节点。
li:nth-child(1) 和 li:first-child 效果一样，都容易被注释/文本节点打断li:nth-of-type(1) 就等同于 li:first-of-type，推荐后者，语义更清晰li:nth-child(1n) 这种冗余写法，既慢又难读:first-child 失效。先看结构，再调样式。
