:only-child 选中父元素中唯一的子元素，无论标签类型，适用于动态内容中为单独元素添加特殊样式。示例中 p:only-child 仅高亮第一个 div 中的段落，因它是唯一子元素；可与 div:only-child、.highlight:only-child 等组合使用，实现精确控制；常用于单个通知提示等场景，提升界面适应性。
:only-child 是一个CSS伪类选择器，用来选中其父元素中唯一的子元素。只要该元素是其父级的唯一直接子元素，就会被选中，无论它的标签类型是什么。这个选择器非常适合在动态内容中为“单独存在”的元素应用特殊样式。
element:only-child { 样式声明 }
示例：突出显示唯一的段落
假设我们有两个 div 容器，一个包含一个 p 元素，另一个包含多个：
<div><br>
<p>我是唯一的段落</p><br>
</div><br><br>
<div><br>
<p>第一个段落</p><br>
<p>第二个段落</p><br>
</div>p:only-child {<br>
background-color: yellow;<br>}
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 能让你在不修改 HTML 结构的前提下，智能地为“孤单”元素添加样式，提升界面适应性。
以上就是如何在CSS中使用:only-child选择器_选中唯一子元素应用特殊样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
424
收藏
