使用 :only-child 伪类可为容器中唯一子元素设置样式，当且仅当该元素是其父元素的唯一直接子元素时生效，常用于动态内容中的单条数据或提示信息的特殊样式处理。
当你想为容器中唯一一个子元素设置样式时，可以使用 CSS 的 :only-child 伪类选择器。它会选中父元素中仅有的那个子元素，如果子元素数量不是1，就不会生效。
基本语法
父元素 > :only-child { 样式声明 }
或者直接写在目标元素上：
元素:only-child { 样式声明 }
实际例子
假设你有一个列表，有时只包含一项，你想让这一项特别醒目：
这是唯一的段落
第一项
第二项
你可以这样写 CSS：
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
立即学习“前端免费学习笔记（深入）”；
.list p:only-child {
color: red;
font-weight: bold;
}
结果是：第一个
会变红加粗，第二个例子中的两个段落都不会被选中，因为它们都不是“唯一子元素”。
注意点
:only-child 只关心它是不是唯一的直接子元素，不管类型 空白文本节点或注释也算“子元素”，可能影响判断（但通常浏览器会忽略空格影响） 常用于动态内容场景，比如消息提示、单条数据展示等需要特殊样式的唯一项
基本上就这些。只要记住：有且仅有一个子元素时，:only-child 才起作用。
以上就是如何用css :only-child选择唯一子元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1027178.html
微信扫一扫 
支付宝扫一扫 
