首页 > 文章 > 前端

CSS中only-child选择器用法详解

时间：2025-10-18 09:54:52 438浏览收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《CSS中使用:only-child选择器可以选中父元素中唯一的一个子元素。这个选择器适用于当某个元素是其父元素的唯一子节点时。语法：element:only-child { /* 样式代码 */ }示例：HTML结构：

这是唯一的段落

CSS样式：p:only-child { color: red; }在这个例子中，

标签是.parent的唯一子元素，因此会被选中并显示为红色。注意事项：:only-child 是一个伪类选择器。它只匹配那些是其父元素唯一子元素的元素。如果父元素中有多个子元素，即使只有一个符合某种条件（如

），但还有其他类型的子元素（如

或），那么该

不会被选中。更复杂的例子：HTML：

标题

段落1

段落2

CSS：p:only-child { color: blue; }在这个例子中，

元素不是唯一子元素，》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

使用 :only-child 伪类可为容器中唯一子元素设置样式，当且仅当该元素是其父元素的唯一直接子元素时生效，常用于动态内容中的单条数据或提示信息的特殊样式处理。

如何用css :only-child选择唯一子元素

当你想为容器中唯一一个子元素设置样式时，可以使用 CSS 的 :only-child 伪类选择器。它会选中父元素中仅有的那个子元素，如果子元素数量不是1，就不会生效。

基本语法

父元素 > :only-child { 样式声明 }

或者直接写在目标元素上：

元素:only-child { 样式声明 }

实际例子

假设你有一个列表，有时只包含一项，你想让这一项特别醒目：

<div class="list">
  <p>这是唯一的段落</p>
</div>

<div class="list">
  <p>第一项</p>
  <p>第二项</p>
</div>

你可以这样写 CSS：

.list p:only-child {
color: red;
font-weight: bold;
}

结果是：第一个

会变红加粗，第二个例子中的两个段落都不会被选中，因为它们都不是“唯一子元素”。

注意点

:only-child 只关心它是不是唯一的直接子元素，不管类型
空白文本节点或注释也算“子元素”，可能影响判断（但通常浏览器会忽略空格影响）
常用于动态内容场景，比如消息提示、单条数据展示等需要特殊样式的唯一项

基本上就这些。只要记住：有且仅有一个子元素时，:only-child 才起作用。

到这里，我们也就讲完了《CSS中only-child选择器用法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS,选择器,伪类,唯一子元素,:only-child的知识点！

CSS 选择器伪类唯一子元素 :only-child