HTML中only-of-type伪类详解：设置唯一子类型样式
在CSS样式开发中，我们经常需要根据元素在父容器中的位置关系设置差异化样式，<only-of-type>伪类就是用于处理“父元素中某种类型下仅有一个子元素”这类场景的关键选择器。本文将详细介绍它的作用、使用方法和实际应用示例。
一、only-of-type伪类的作用
<only-of-type>是CSS3引入的结构化伪类选择器，它的核心作用是：选中父元素中，同类型标签下仅存在一个的子元素。
注意它和<only-child>伪类的区别：<only-child>要求元素必须是父元素的唯一子元素，而<only-of-type>只要求该元素在父元素的所有同类型子元素中是唯一的，不限制其他类型子元素的存在。
举个例子：如果父元素下有1个<p>标签、2个<div>标签，那么<p>标签就符合<only-of-type>的选中条件，因为它同类型的子元素只有自己一个，但是不符合<only-child>条件，因为父元素还有其他类型的子元素。
二、only-of-type伪类的基本语法
它的语法格式非常简单，结构如下：
/* 选中父元素中唯一存在的指定类型子元素 */
父元素 子元素标签:only-of-type {
样式属性: 属性值;
}也可以直接对全局范围内的符合条件的元素生效：
子元素标签:only-of-type {
样式属性: 属性值;
}三、实际使用示例
3.1 基础示例：选中唯一的段落元素
先看一段HTML结构：
<div class="container"> <h3>标题内容</h3> <p>这是唯一的段落内容</p> <div>其他div内容</div> </div>
我们想给这个容器中唯一的<p>标签设置特殊样式，就可以用<only-of-type>实现：
.container p:only-of-type {
color: #ff5500;
font-size: 16px;
font-weight: bold;
padding: 10px;
border-left: 3px solid #ff5500;
}运行后，只有这个容器中唯一的<p>标签会应用上述样式，其他<h3>和<div>标签不会受影响。
3.2 对比示例：only-of-type和only-child的区别
我们准备两组不同的HTML结构来做对比：
第一组结构（符合only-of-type，不符合only-child）：
<div class="box1"> <span>唯一的span</span> <p>其他p标签1</p> <p>其他p标签2</p> </div>
第二组结构（同时符合only-of-type和only-child）：
<div class="box2"> <span>唯一的子元素</span> </div>
对应的CSS样式：
/* only-of-type样式 */
span:only-of-type {
color: blue;
}
/* only-child样式 */
span:only-child {
font-size: 18px;
background-color: #f0f0f0;
}运行结果：
第一组的<span>只会应用蓝色文字样式，因为box1有多个子元素，不符合only-child条件
第二组的<span>会同时应用蓝色文字、18px字号和灰色背景样式，因为它既是唯一的span类型子元素，也是父元素的唯一子元素
四、常见应用场景
<only-of-type>伪类在实际开发中有很多实用场景，常见的有：
文章列表中，当某篇文章没有配图时，给唯一的文字内容区域设置更大的内边距
表单容器中，当只有一种输入类型（比如只有输入框没有选择框）时，调整输入框的宽度为100%
卡片组件中，当只有一张图片时，设置图片为圆形展示，多张图片时设置为方形平铺
4.1 表单场景示例
HTML结构：
<form class="info-form"> <label>用户名：</label> <input type="text" placeholder="请输入用户名"> <button type="submit">提交</button> </form>
CSS样式：
/* 当表单中只有一个input输入框时，设置宽度为100% */
.info-form input:only-of-type {
width: 100%;
height: 36px;
padding: 0 10px;
box-sizing: border-box;
}如果后续表单添加了其他<input>或者<select>元素，这个样式就会自动失效，不需要手动修改CSS，非常灵活。
五、注意事项
使用<only-of-type>伪类时需要注意以下几点：
它只判断同类型标签的唯一性，和元素的其他属性（如class、id）无关，只要是同标签类型就会归类判断
它的兼容性较好，支持IE9及以上版本的浏览器，现代浏览器都完全支持
如果父元素下同种类型的子元素有0个或者2个及以上，该选择器都不会生效
通过合理使用<only-of-type>伪类，我们可以减少不必要的class命名，让CSS代码更简洁，逻辑更清晰，提升样式的可维护性。