当父元素下恰好只有一个且类型匹配的子元素时才该用 :only-child；它不匹配零个或多个子元素，且对文本节点敏感，常见于单子元素布局适配，但需配合 :has() 或 js 才能覆盖更多数量场景。
什么时候该用 :only-child 而不是 :first-child 或 :last-child
当你真正想表达“这个元素是父容器里唯一的子元素”时，才该用 :only-child。它不关心顺序或位置，只认数量——父元素下必须**恰好一个子元素**，且类型匹配（比如你写 div:only-child，那唯一子元素必须是 div）。而 :first-child 在多个子元素时也可能生效（只要它是第一个），容易误判结构意图。
常见误用场景：给列表项加边框，以为用 li:only-child { border: none; } 就能“自动适配单条数据”，结果后端返回空数组（ul 里没 li），样式完全不触发——:only-child 不匹配“零个子元素”，也不匹配“多个子元素”，只咬死“一个”。
:only-child 的匹配规则和常见失效原因
它要求两个条件同时满足：1）该元素是父元素的唯一子节点；2）该元素的标签名/类型与选择器一致。哪怕父元素里混着一个文本节点（比如换行、空格），:only-child 就会失效——因为此时子节点数 ≥ 2。
- HTML 中的换行和缩进会被解析为
Text节点，例如：- Only item
li+换行），li:only-child不匹配 - 使用
display: contents的父元素会把自身“消失”，子元素直接挂到祖父级，导致原本的父子关系断裂，:only-child失效 - 动态插入内容后未触发重排（如用
innerHTML替换但没清空旧节点），残留注释或空格节点也会干扰匹配
配合伪元素和 Flex/Grid 实现单子元素自适应布局
单独用 :only-child 很难撑起完整布局逻辑，通常要结合其他 CSS 特性。比如让单个卡片居中、去掉多余间距，或在列表为空时显示占位提示（注意：这得靠 JS 控制类名，:only-child 本身无法检测“无子元素”）。
实用组合示例：
/* 单个子元素时全宽居中，多个时等宽分栏 */
.container > * {
flex: 1;
}
.container:has(> *:only-child) {
display: flex;
justify-content: center;
}
.container > *:only-child {
width: 100%;
max-width: 600px;
}
<p>/<em> 配合 ::before 显示“仅此一项”的视觉提示 </em>/
.item:only-child::after {
content: "（唯一）";
font-size: 0.75em;
color: #666;
margin-left: 8px;
}</p>
注意：:has() 是较新特性（Chrome 105+、Safari 15.4+ 支持），若需兼容旧浏览器，得改用 JS 检测 parent.children.length === 1 后添加类名。
比 :only-child 更鲁棒的替代方案有哪些
当真实需求是“根据子元素数量调整样式”，纯 CSS 方案有限：:only-child 只覆盖 n=1，:nth-child(1):nth-last-child(1) 效果相同但更啰嗦；n=2、n≥3 等情况就得靠 :nth-child 组合或 JS。
- 需要响应“0 个子元素”？CSS 无原生伪类，必须用 JS 判断
element.children.length === 0，然后加.empty类 - 需要区分“1 个”和“2+ 个”？可用
:first-child:nth-last-child(1)（等价于:only-child），但写法更绕，可读性差 - 真正稳定的方案是服务端或组件层输出明确的 class，例如
<ul class="list--single"></ul>或<ul class="list--empty"></ul>，避免 CSS 承担结构判断职责
复杂页面结构里，过度依赖 :only-child 容易让样式逻辑散落在各处，反而增加维护成本。数量判断这件事，CSS 做得越深，边界 case 越多——留个心眼，别让它替 JS 做决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
