:first-child 精准匹配父元素的第一个子元素，要求必须是或的首个子节点；若存在注释、空格文本节点或其他标签则失效；与：nth-child(1)效果一致但语义更明确。
用 :first-child 设置列表第一项样式最直接
只要第一项确实是父元素的第一个子元素，:first-child 就能精准命中。常见于
或
下紧接
注意：它匹配的是「第一个子元素」，不是「第一个 li」。如果列表前面有注释、空格文本节点（在 HTML 中通常被忽略），或意外插入了其他标签（比如
），
子元素。但底层逻辑不同：
:first-child 就会失效。
- 确保
- 避免在第一个
- 不推荐用
:first-of-type替代——它按标签类型匹配，虽更宽松，但语义不如:first-child明确
:first-child 和 :nth-child(1) 有 区别 吗
在标准列表中，li:first-child 和 li:nth-child(1) 效果完全一致，都只选中第一个
-
:first-child是:nth-child(1)的语法糖，性能无差异 - 如果未来要扩展为「第 2 项、第 4 项」等规律样式，直接改用
:nth-child(2n)更连贯 - 若列表结构可能混入其他标签（如
:nth-child(1)仍只看位置，和:first-child行为一致；真正需要区分时得用:nth-of-type()实际 CSS 写法和容易忽略的细节
单独加粗、变色、去点、加图标都可直接写。关键是别漏掉选择器权重或继承干扰。
立即学习 “ 前端免费学习笔记（深入）”；
ul li:first-child {font-weight: bold; color: #2563eb; list-style-type: none;} ul li:first-child::before {content: "★"; color: #f59e0b;}- 如果列表用了
list-style: none全局重置，:first-child里再设list-style-type: disc不会恢复原点——因为已被父级覆盖，需用list-style: inherit或显式还原 -
::before插入内容时，注意display默认是inline，若想 垂直居中，需配合line-height或vertical-align - 在 Flex/Grid 列表中，
:first-child依然有效，但若用order属性调整了渲染顺序，伪类仍按 DOM 顺序匹配，不是视觉顺序
当
:first-child不生效时先查什么最常见的原因是 DOM 结构不符合预期。打开浏览器开发者 工具，逐层检查元素的「实际子节点」列表，看第一个是不是你认为的
- 。
- 右键检查第一个
childNodes（在 Console 中输入$0.parentNode.childNodes） - 确认没有隐藏的文本节点（类型为
Text）、注释节点（Comment）或服务端注入的占位符 - 如果是 Vue/React 渲染的列表，检查是否用了
v-if/ 条件渲染导致第一个li实际上不是首个子节点 - 临时加一条通用规则测试：
ul *:first-child {outline: 2px solid red;}，看红框套在谁身上
CSS 伪类看似简单，但
:first-child的“第一”永远绑定在 DOM 树结构上，而不是你肉眼看到的渲染结果。结构一变，样式就断——这点比 JS 逻辑更容易被忽略。 - 如果列表用了
转载说明：转载本网站任何内容，请按照转载方式正确书写本站原文地址。本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。
