详细分析CSS伪类:only-of-type

定义

发现only-of-type这个伪类与使用子代选择器也差不多，好奇去MDN上看了一下定义：

​:only-of-type CSS 伪类代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

有点抽象，我们根据实际例子来理解定义：

看了例子后，定义就很明显了，在父元素中此种元素唯一存在时会被选中

“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

<div>
	<p>1</P>
	<span>2</span>
	<i>3</i>
</div>

比如上述结构，因为p、span、i都是在div里唯一存在的，就可以用div>p:only-of-type,div>span:only-of-type,div>i:only-of-type来选中三者

应用

我想到的可能应用场景：

1.动态添加标签：当你有一个动态生成标签的场景，并且想要对唯一的某个特定类型的标签应用样式时，:only-of-type 可以派上用场。通过使用 :only-of-type 选择器，你可以确保只有一个该类型的标签应用特定的样式，而其他相同类型的标签不会受到样式的影响。

2.特定状态下的样式变化：如果在某些特定状态下，你想要为唯一的某个特定类型的标签应用不同于其他同类型标签的样式，:only-of-type 可以帮助你实现这个效果。例如，在表单验证时，如果某个字段验证失败，通过使用 :only-of-type 可以为该字段的错误提示添加特殊的样式，而其他字段的错误提示样式保持不变。

PS. :only-of-type 选择器具有一定的限制，它需要父元素中只有一个特定类型的元素，并且没有其他类型的兄弟元素。如果这些条件不满足，:only-of-type 将无法选择任何元素。在使用时要注意结构和样式需求的匹配。