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

标签，那么可以这样写：div :only-child { color: red; }注意事项：:only-child选择器会匹配父元素中唯一的子元素。如果父元素中有多个子元素，:only-child不会生效。该选择器在IE7及更早版本中不被支持。通过这种方式，你可以轻松地为唯一子元素添加特定的样式。》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

:only-child选择父元素中唯一的子元素，如p:only-child{color:red}仅当p是其父元素的唯一子元素时生效，与:only-of-type不同的是它不区分类型且要求无其他兄弟元素。

在 CSS 中，:only-child 伪类用于选择某个元素，当它是其父元素中唯一的子元素时生效。也就是说，如果一个父元素只有一个子元素，那么这个子元素就会被 :only-child 匹配。

基本语法

例如，你想给某个容器中唯一的

元素添加特殊样式：

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

这段代码的意思是：只有当

是其父元素的唯一子元素时，才应用红色加粗样式。

使用场景示例

假设有以下 HTML 结构：

<div>
  <p>我是唯一的段落</p>
</div>

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>

<div>
  <span>其他元素</span>
</div>

上面第一个

中只有一个

，所以它会匹配 p:only-child，样式生效。第二个

有两个

，都不满足“唯一子元素”的条件，因此不匹配。第三个

虽然只有一个子元素，但它是 ，不是

，所以 p:only-child 不会选中任何东西。

与 :only-of-type 的区别

:only-child 判断的是“是否是唯一的子元素”，不管类型。

:only-of-type 判断的是“该类型的元素是否只有一个”，允许其他类型的兄弟元素存在。

举例说明：

```html

段落1

段落2

辅助文字 ```

p:only-child {
  background: yellow;
}

只有第一个

会被选中，因为它是父元素中唯一的子元素。第二个

虽然是唯一的

，但它不是唯一的子元素（还有 ），所以 :only-child 不匹配。

实用建议

• 适用于需要根据子元素数量动态调整样式的场景，比如只有一项时居中、加大字体等。
• 常用于列表、卡片、提示框等组件中处理单一内容的显示效果。
• 注意空格和换行不会被当作元素，所以不影响 :only-child 判断。

基本上就这些。用好 :only-child 可以减少不必要的类名，让样式更智能。

好了，本文到此结束，带大家了解了《CSS中only-child选择器用法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

CSS 选择器 唯一子元素 :only-of-type :only-child

Win11家庭版启用组策略教程

上一篇

Win11家庭版启用组策略教程

下一篇

PySpark流式DF转JSON实战指南