CSS 选择器 :only-of-type

概述

:only-of-type 是一个 CSS 伪类选择器，用于选取那些在其父元素中是唯一一个指定类型的子元素。简单来说，如果某个元素是其父元素下唯一一个特定类型的子元素，则该元素会被选中。

使用场景

这个选择器常用于样式化那些在特定上下文中唯一的元素。例如，如果你有一个包含多种类型的子元素的容器，而你只想给其中一种类型的子元素应用样式，并且你知道这种类型的子元素只有一个，那么你可以使用 :only-of-type 来实现这一点。

示例

假设我们有以下 HTML 结构：

<div class="container">
  <p>这是一段文本。</p>
  <p>这是另一段文本。</p>
  <span>这是一个 span 元素。</span>
</div>

如果我们想只给 .container 中唯一的 <p> 元素添加特殊的样式，可以这样写 CSS：

.container p:only-of-type {
  color: red;
}

在这个例子中，只有第一个 <p> 元素会被选中并应用红色字体颜色，因为它是唯一的一个 <p> 元素。

多个元素的情况

如果 .container 中有多个相同类型的子元素，:only-of-type 将不会选中任何元素。例如：

<div class="container">
  <p>这是一段文本。</p>
  <p>这是另一段文本。</p>
  <p>这是第三段文本。</p>
</div>

在这种情况下，由于 <p> 元素不是唯一的，因此没有任何 <p> 元素会被 :only-of-type 选中。

组合其他选择器

:only-of-type 可以与其他选择器组合使用，以实现更复杂的样式规则。例如，我们可以将它与类选择器结合使用来针对特定类别的唯一子元素进行样式化：

.container .special:only-of-type {
  background-color: yellow;
}

在这个例子中，如果 .container 下有一个带有 .special 类并且是唯一的一个子元素，那么它将会被选中并应用黄色背景色。

注意事项

• :only-of-type 选择器仅根据元素类型进行判断，而不考虑其内容或属性。
• 如果需要对具有相同标签但不同属性的元素进行样式化，可能需要使用其他选择器，如属性选择器或类选择器。

通过使用 :only-of-type 选择器，开发者可以在不依赖于元素顺序的情况下，灵活地为特定类型的唯一子元素设置样式。这对于创建干净、简洁且易于维护的 CSS 代码非常有用。