:first-child不生效是因为它要求元素既是父元素第一个子元素又类型匹配，而前面的注释、空格等会破坏条件；:first-of-type更可靠，只关注同类型中首个出现的元素。
为什么 :first-child 有时不生效
常见现象是给 ul li:first-child 写了样式，但第一项没变——很可能因为列表项前面有其他元素（比如注释、空格文本节点、或意外插入的 <div>），导致第一个 <code>li 并非父容器的「第一个子元素」。:first-child 匹配的是「父元素下排第一且类型匹配的子元素」，不是「同类元素中排第一的那个」。
- 检查 DOM 结构：用浏览器开发者工具看
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的上下文 - 兼容性好：IE9+ 都支持，和
:first-child一致 - 注意：如果父容器里还有别的
li（比如嵌套列表里的），它仍只选最外层第一个
需要精确控制「可视第一行」时怎么办
当列表被 JS 动态渲染、或 CSS 用 display: none / visibility: hidden 隐藏了部分项，:first-of-type 和 :first-child 都无法感知「可见性」。这时必须靠 JS 或预处理逻辑。
- 纯 CSS 无解：选择器无法判断是否可见
- 可行替代：
ul li:not([hidden]):not(.hidden):first-of-type（前提是隐藏是通过属性或 class 控制） - 更可靠方式：JS 动态加类，例如
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)这种冗余写法，既慢又难读
真正卡住的时候，往往不是选择器写错了，而是 DOM 结构比想象中更“松散”——多一行换行、一个未闭合标签、一段服务端注入的空格，都可能让 :first-child 失效。先看结构，再调样式。
