: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></ul>下只有这一个<li>，不能有<p></p>、<div> 或任何其他节点）<li> <code>:only-of-type：只要求同类型元素中它是唯一的，允许其他类型兄弟存在（比如li:only-of-type在<ul> <li>A</li> <p>note</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </ul>中仍会匹配）
单项列表样式若想兼容「可能混有说明文案」的结构，优先考虑 :only-of-type；若真要锁定「整个列表只剩一项」的视觉状态，才用 :only-child。
单项列表的典型样式处理技巧
比如给仅含一项的 <ul></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;
}</p>
注意点：
-
ul:only-child是指<ul></ul>自身是它父元素的唯一子元素，不是指它自己只有一项 —— 这容易写反 - 如果列表项是
<li>，要加样式得选li:only-child，而不是ul:only-child（除非你想控制整个<ul></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 本身对此无能为力。
