定义

:only-of-type 选择器匹配一个元素，该元素是其父元素中唯一具有相同类型（标签名）的元素。

语法

:only-of-type {
  /* 样式规则 */
}

用法

:only-of-type 选择器用于为特定类型的元素设置样式，这些元素是其父元素中唯一具有该类型的元素。例如，以下规则将为父元素中唯一一个 <p> 元素设置红色文本颜色：

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

示例

示例 1：为父元素中唯一一个 <li> 元素设置蓝色背景色

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

li:only-of-type {
  background-color: blue;
}

示例 2：为父元素中唯一一个带有特定类名的 <div> 元素设置边框

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box red-box"></div>
</div>

.container div:only-of-type {
  border: 1px solid black;
}

示例 3：为父元素中唯一一个不是 <p> 元素的元素设置字体加粗

<div>
  <p>段落 1</p>
  <span>跨度 1</span>
  <p>段落 2</p>
</div>

div:not(p):only-of-type {
  font-weight: bold;
}

兼容性

:only-of-type 选择器在所有现代浏览器中都得到支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

注意事项

:only-of-type 选择器只考虑元素的类型（标签名），而不考虑其他因素，如元素的类名或 ID。这意味着，如果一个父元素中有多个具有相同类型但不同类名或 ID 的元素，则该选择器将匹配所有这些元素。

替代选择器

在某些情况下，可以使用其他选择器来实现与 :only-of-type 选择器相同的效果。例如，可以使用 :first-of-type 和 :last-of-type 选择器来匹配父元素中的第一个或最后一个具有特定类型的元素。

// www.javascriptcn.com code example
/* 匹配父元素中的第一个 `<li>` 元素 */
li:first-of-type {
  /* 样式规则 */
}

/* 匹配父元素中的最后一个 `<li>` 元素 */
li:last-of-type {
  /* 样式规则 */
}