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="first"、class="item-2"。

现代更灵活的做法：

• 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