:only-child 选中父元素中唯一的子元素，无论标签类型，适用于动态内容中为单独元素添加特殊样式。示例中 p:only-child 仅高亮第一个 div 中的段落，因它是唯一子元素；可与 div:only-child、.highlight:only-child 等组合使用，实现精确控制；常用于单个通知提示等场景，提升界面适应性。
:only-child 是一个CSS伪类选择器，用来选中其父元素中唯一的子元素。只要该元素是其父级的唯一直接子元素，就会被选中，无论它的标签类型是什么。这个选择器非常适合在动态内容中为“单独存在”的元素应用特殊样式。
基本语法与作用
选择器 :only-child 的写法如下：element:only-child { 样式声明 }
示例：突出显示唯一的段落
假设我们有两个 div 容器，一个包含一个 p 元素，另一个包含多个：
<div><br>
<p>我是唯一的段落</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><br>
</div><br><br>
<div><br>
<p>第一个段落</p><br>
<p>第二个段落</p><br>
</div>
使用以下 CSS 可以为唯一的段落添加背景色：
p:only-child {<br>
background-color: yellow;<br>}
结果是只有第一个 div 中的 p 被高亮，因为它是父元素中唯一的子元素。
与其他选择器结合使用
:only-child 可以和其他选择器组合，实现更精确的控制。-
div:only-child：选中作为唯一子元素的 div -
.highlight:only-child：选中拥有 highlight 类且是唯一子元素的元素 -
ul li:only-child：当列表只有一个列表项时，为其添加特殊样式（比如居中或加大字号）
实用场景：单个通知提示
在消息系统中，如果只有一条通知，可以使用 :.notification:only-child {<br>
border: 2px solid green;<br>
text-align: center;<br>
padding: 20px;<br>}
让单独的通知更加醒目。
注意事项
使用 :only-child 时需注意以下几点：- 它只看**直接子元素**，不关心后代元素
- 空白文本节点（如换行、空格）在某些情况下可能被浏览器视为文本节点，但通常不会影响 :only-child 判断
- 如果父元素中有多个元素，哪怕其他是 span 或 img，:only-child 也不会生效
基本上就这些。掌握 :only-child 能让你在不修改 HTML 结构的前提下，智能地为“孤单”元素添加样式，提升界面适应性。
