css 伪类与列表样式_使用 :first-child 和 :nth-child 设置列表项样式

:first-child未生效是因为父元素首个子节点不是目标元素，如存在注释、空格或非li元素；:nth-child按所有子元素统一编号，非仅目标类型；建议用:first-of-type或:nth-of-type更可靠。

为什么 :first-child 没生效？检查父元素结构是否干净

常见现象是给 ul li:first-child 写了红色字体，但第一个 li 没变色。根本原因往往是 ul 的第一个子节点不是 li —— 比如开头有注释、空格换行产生的文本节点，或意外插入的 div、p 等元素。:first-child 匹配的是「父元素的第一个子元素」，且必须类型匹配（即必须是 li）。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 用浏览器开发者工具选中目标 li，右键 →「Edit as html」，确认它确实是 ul 的第一个子节点
• 避免在 ul 内写注释或换行缩进（或改用 :first-of-type 更稳妥）
• 若列表前固定有标题，可把样式移到标题后第一个 li：例如 h2 + ul li:first-child

:nth-child(n) 的计数逻辑与常见误用

:nth-child 从父元素所有子元素中统一编号，不管类型。比如 ul 下有 li、div、li，那么第二个 li 实际是第 3 个子元素，li:nth-child(2) 就不会命中它。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 想选「第 n 个 li」，用 li:nth-of-type(n) 更可靠
• :nth-child(odd) 和 :nth-child(even) 常用于隔行变色，但前提是 li 是连续、无干扰子元素
• 公式写法如 :nth-child(3n+1) 表示「第 1、4、7… 个子元素」，注意括号不能省略

列表项首尾样式冲突时的优先级处理

当同时设置 li:first-child 和 li:nth-child(2)，又希望首项不被后续规则覆盖，得注意 css 优先级和顺序。如果 li:nth-child(2) 的声明写在前面，而 li:first-child 在后面，后者会覆盖前者对首项的影响——但仅限于属性重叠部分（比如都设了 color）。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 把更具体的伪类（如 :first-child）放在通用规则（如 li 或 :nth-child）之后
• 避免用 !important，优先靠选择器权重解决：例如 ul.my-list li:first-child 比 li:first-child 权重高
• 用 :not(:first-child) 显式排除首项，再统一设置其他项内边距：li:not(:first-child) { margin-top: 0.5em; }

兼容性与现代替代方案

:first-child 和 :nth-child 在 IE9+ 完全支持，IE8 只支持 :first-child（不支持 :nth-child）。如果项目还需兼容旧 IE，得用 class 模拟，比如服务端/js 加 class="tuc-19bc10f7-d75e84-0 first tuc-19bc10f7-d75e84-0"、class="tuc-19bc10f7-d75e84-0 item-2 tuc-19bc10f7-d75e84-0"。

现代更灵活的做法：

• CSS 中用 :has()（chrome 105+、safari 15.4+）做上下文判断，例如 ul:has(> li:first-child.highlighted)
• 对复杂逻辑，不如用 JS 动态加 class：

  document.querySelectorAll('ul li').forEach((el, i) => {   if (i === 0) el.classlist.add('first');   if (i % 2 === 0) el.classList.add('even'); });

• 真正需要「视觉上第一个可见项」时，CSS 伪类可能失效（比如某些 li 被 display: none），此时必须用 JS 判断 offsetParent !== NULL

伪类本身不操作 dom，只响应结构；一旦结构被 JS 修改或 CSS 隐藏打乱，样式就容易“失准”。别指望 :nth-child 能智能跳过隐藏项——它数的是标签树位置，不是渲染结果。