:only-child 在元素是父容器中唯一子元素时生效，无论类型；2. :only-of-type 在元素是同类型中唯一一个时生效，允许其他类型兄弟节点存在；二者区别在于匹配范围，合理使用可减少类名依赖，提升样式效率。
:only-child 和 :only-of-type 是 CSS 中用于精确控制子元素样式的伪类选择器，它们帮助开发者在特定条件下为元素添加样式，而无需额外的类名或 JavaScript。
当一个元素是其父容器中唯一的子元素时，:only-child 会匹配该元素。这意味着它没有兄弟节点，不论类型。
例如：
常见用途：避免在列表项多于一个时应用特殊边距或背景。
立即学习“前端免费学习笔记（深入）”；
示例：
p:only-child {
color: red;
font-weight: bold;
}
只有当 p 是父元素中唯一的子元素时，文字才会变红加粗。
:only-of-type 更加灵活，它表示该元素在其父容器中是某一类型中的唯一一个。比如，即使有其他不同标签存在，只要它是唯一的 p 或唯一的 img，就能被选中。
典型场景：
img:only-of-type {
display: block;
margin: 0 auto;
border: 2px solid #ccc;
}
即使 img 前后有 h2、p 等其他标签，只要页面中只有一个 img，样式就会生效。
两者区别关键在于“所有子元素”和“同类元素”的范围差异。使用时根据结构需求选择，能有效减少冗余类名，提升样式维护性。
基本上就这些，用对了很省事。
以上就是CSS伪类:only-child和:only-of-type有什么作用_子元素样式控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
793
收藏
