UI元素状态伪类选择器是css中用于匹配处于特定状态的元素的一类选择器，它们不需要依赖额外的类名或者属性，就能根据元素的交互状态自动生效样式，是前端开发中优化页面交互体验的重要工具。
常用UI元素状态伪类选择器分类
根据元素的常见交互状态，UI元素状态伪类选择器可以分为以下几类，不同类别的适用场景和触发逻辑有明显区别。
鼠标交互相关选择器
- :hover：当鼠标指针悬停在元素上方时触发，是最常见的交互状态选择器，适用于所有可交互元素。
- :active：当元素被激活时触发，通常是鼠标点击元素按下未松开的状态，多用于按钮点击反馈。
- :focus：当元素获得焦点时触发，常见于输入框、按钮等可聚焦元素，点击或者通过键盘Tab键切换都会触发。
- :focus-within：当元素自身或者其任意子元素获得焦点时触发，适合父容器根据内部元素的焦点状态调整样式。
表单元素状态相关选择器
- :checked：匹配处于选中状态的单选框、复选框或者<select>元素中的<option>选项。
- :disabled：匹配处于禁用状态的元素，通常是添加了disabled属性的表单元素。
- :enabled：匹配处于可用状态的元素，和:disabled状态相反。
- :required：匹配带有required属性的必填表单元素。
- :optional：匹配没有required属性的可选表单元素。
- :valid：匹配输入内容符合校验规则的表单元素。
- :invalid：匹配输入内容不符合校验规则的表单元素。
- :in-range：匹配输入值在min和max属性范围内的数值或日期类型的表单元素。
- :out-of-range：匹配输入值超出min和max属性范围的数值或日期类型的表单元素。
其他状态相关选择器
- :read-only：匹配处于只读状态的元素，通常是添加了readonly属性的表单元素。
- :read-write：匹配处于可编辑状态的元素，和:read-only状态相反。
- :placeholder-shown：匹配当前显示占位符文本的输入框元素。
- :default：匹配一组相关元素中默认选中的元素，比如默认的提交按钮、默认选中的单选框等。
选择器使用示例
下面通过具体的代码示例展示部分常用选择器的实际用法，所有代码都可以直接复制到html文件中运行查看效果。
:hover和:active示例
/* 按钮默认样式 */
.btn {
padding: 8px 16px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
/* 鼠标悬停时修改背景色 */
.btn:hover {
background-color: #40a9ff;
}
/* 鼠标点击按下时修改背景色和位移 */
.btn:active {
background-color: #096dd9;
transform: translateY(1px);
}
:checked示例
/* 隐藏原生单选框 */
input[type="radio"] {
display: none;
}
/* 自定义单选框样式 */
.radio-label {
display: inline-block;
margin-right: 16px;
cursor: pointer;
}
/* 未选中时的自定义样式 */
.radio-custom {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #d9d9d9;
border-radius: 50%;
vertical-align: middle;
margin-right: 4px;
transition: all 0.2s;
}
/* 选中时的自定义样式 */
input[type="radio"]:checked + .radio-custom {
border-color: #1890ff;
background-color: #1890ff;
}
/* 选中时添加内部小圆点 */
input[type="radio"]:checked + .radio-custom::after {
content: "";
display: block;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px auto;
}
:disabled和:enabled示例
/* 可用输入框样式 */
input[type="text"]:enabled {
border: 1px solid #d9d9d9;
padding: 8px 12px;
border-radius: 4px;
}
/* 禁用输入框样式 */
input[type="text"]:disabled {
background-color: #f5f5f5;
color: #bfbfbf;
cursor: not-allowed;
}
:valid和:invalid示例
/* 输入合法的邮箱输入框样式 */
input[type="email"]:valid {
border: 1px solid #52c41a;
}
/* 输入不合法的邮箱输入框样式 */
input[type="email"]:invalid {
border: 1px solid #ff4d4f;
}
/* 输入框获得焦点时显示提示文本 */
input[type="email"]:focus + .tip {
display: block;
}
.tip {
display: none;
font-size: 12px;
color: #8c8c8c;
margin-top: 4px;
}
使用注意事项
在使用UI元素状态伪类选择器时，需要注意以下几个常见问题，避免出现样式不生效的情况。
- 部分选择器有兼容性限制，比如:focus-within、:placeholder-shown在旧版本浏览器中不支持，使用前需要确认目标浏览器的兼容情况。
- :hover选择器在移动端设备上通常没有效果，因为移动端没有鼠标悬停操作，需要搭配其他交互逻辑实现类似效果。
- 选择器的优先级和普通的类选择器一致，如果样式被覆盖，需要检查优先级或者添加更具体的选择器。
- 表单相关的状态选择器只对对应的表单元素生效，比如:checked只对单选框、复选框和<option>生效，不能用于普通元素。
合理运用UI元素状态伪类选择器，可以大幅减少页面交互样式开发中的js代码量，让样式逻辑更清晰，同时也更符合css样式和交互逻辑分离的开发原则，提升项目的可维护性。
cssUI元素状态伪类选择器:hover:checked:disabled修改时间：2026-07-04 11:33:37