:only-child仅在元素是父容器中唯一且直接的子节点（children.length严格等于1）时生效；空格、换行、注释等文本节点均会导致失效，与元素类型、可见性或CSS样式无关。
什么时候 :only-child 才真正生效
:only-child 只在元素是其父容器中「唯一且直接的子元素」时匹配。它不看内容、不看类型、不看是否可见，只数 DOM 树中的直接子节点数量是否为 1。
常见误判场景：
- 父元素里有空格、换行或注释 —— 这些都是文本节点，会破坏「唯一子元素」条件
- 用 JavaScript 动态插入了隐藏元素（比如
<span style="display:none"></span>），哪怕不可见也会计入子节点数 - 用了
display: none或visibility: hidden的兄弟节点依然存在，:only-child不会触发
验证方式很简单：
console.log(parent.children.length); // 必须严格等于 1
:only-child 和 :only-of-type 的关键区别
两者常被混用，但行为完全不同：
立即学习“前端免费学习笔记（深入）”；
-
:only-child：要求父元素下「只有一个子元素」，且该子元素就是当前选择器目标（比如li:only-child要求<ul>下只有这一个<li>，不能有<p>、<div>或任何其他节点） -
:only-of-type：只要求同类型元素中它是唯一的，允许其他类型兄弟存在（比如li:only-of-type在<ul><li>A</li><p>note</p></ul>中仍会匹配）
单项列表样式若想兼容「可能混有说明文案」的结构，优先考虑 :only-of-type；若真要锁定「整个列表只剩一项」的视觉状态，才用 :only-child。
单项列表的典型样式处理技巧
比如给仅含一项的 <ul> 列表加圆角、去内边距、强化边框等，让其看起来更像一个卡片而非列表：
ul li:only-child {
border-radius: 6px;
padding: 12px 16px;
border: 1px solid #ddd;
background: #f9f9f9;
}
<p>/<em> 配合清除默认列表符号 </em>/
ul:only-child {
list-style: none;
padding: 0;
}注意点：
-
ul:only-child是指<ul>自身是它父元素的唯一子元素，不是指它自己只有一项 —— 这容易写反 - 如果列表项是
<li>，要加样式得选li:only-child，而不是ul:only-child（除非你想控制整个<ul>容器） - 移动端小屏下，单项列表有时需取消左右 padding 防止溢出，可用媒体查询叠加：
@media (max-width: 480px) { li:only-child { padding-left: 0; padding-right: 0; } }
为什么有时候写了 :only-child 却没生效
最常被忽略的是 HTML 源码里的隐式节点：
- 模板引擎（如 Vue/JSX）生成的空格和换行会被解析为文本节点，导致
children.length > 1 - 服务端渲染（SSR）后保留的缩进也会造成同样问题
- 使用
innerHTML插入内容时，若字符串开头或结尾有空格，也可能引入多余文本节点
临时调试方法：
Array.from(parent.childNodes).forEach((n, i) => console.log(i, n.nodeName, n.nodeType));其中
nodeType === 3 就是文本节点 —— 看到它，就知道为什么 :only-child 失效了。
真正干净的单项列表结构，往往需要显式控制 HTML 输出或用 JS 清理空白节点，CSS 本身对此无能为力。
