1. **`:enabled` 和 `:disabled`**
选择启用或禁用的表单元素（如输入框、按钮等）。
css
input:enabled {
background-color: white;
}
input:disabled {
background-color: lightgray;
cursor: not-allowed;
}
2. **`:checked`**
选择被选中的单选框（radio）、复选框（checkbox）或 `<option>` 元素。
css
input[type="checkbox"]:checked + label {
text-decoration: line-through; /* 选中时给标签加删除线 */
}
option:checked {
font-weight: bold;
}
3. **`:indeterminate`**
选择处于不确定状态的复选框（如通过 JavaScript 设置为 `indeterminate`）。
css
input[type="checkbox"]:indeterminate {
background-color: yellow;
}
4. **`:default`**
选择默认的表单元素（如默认提交按钮或预选的选项）。
css
button:default {
border: 2px solid blue; /* 标记默认按钮 */
}
5. **`:valid` 和 `:invalid`**
基于表单验证状态选择有效或无效的表单元素。
css
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
6. **`:required` 和 `:optional`**
选择必填或可选的表单元素。
css
input:required {
background-color: #fff8e1; /* 标记必填字段 */
}
input:optional {
opacity: 0.8;
}
7. **`:in-range` 和 `:out-of-range`**
选择值在指定范围内或超出范围的表单元素（如 `input[type="number"]`）。
css
input[type="number"]:in-range {
border-color: green;
}
input[type="number"]:out-of-range {
border-color: red;
}
8. **`:read-only` 和 `:read-write`**
选择只读或可读写的表单元素。
css
input:read-only {
background-color: #f5f5f5;
cursor: not-allowed;
}
input:read-write {
background-color: white;
}
9. **`:focus`**
选择当前获得焦点的元素（如用户点击或 Tab 键导航到的元素）。
css
input:focus {
outline: 2px solid blue;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}
10. **`:focus-within`**
选择包含焦点元素的父元素。常用于表单验证或嵌套焦点状态。
css
form:focus-within {
background-color: #f9f9f9; /* 整个表单在焦点内时高亮 */
}
11. **`:focus-visible`**
选择通过键盘导航获得焦点的元素（与鼠标点击区分），用于改进无障碍性。
css
button:focus-visible {
outline: 3px solid orange; /* 仅键盘导航时显示轮廓 */
}
示例用法
假设 HTML 结构如下：
html
<form>
<input type="text" required>
<input type="checkbox" checked>
<button type="submit">提交</button>
</form>
以下 CSS 规则将：
css
input:required {
border: 1px solid #ff9800; /* 标记必填字段 */
}
input:checked {
transform: scale(1.2); /* 放大选中的复选框 */
}
button:focus {
background-color: #4caf50; /* 按钮获得焦点时改变背景色 */
}
注意事项
- **兼容性**：某些伪类（如 `:focus-visible`）可能需要浏览器前缀或兼容性处理。
- **结合使用**：UI 伪类可以与其他选择器（如属性选择器、类选择器）组合使用，增强选择能力。
- **动态更新**：UI 伪类的状态通常由用户交互或 JavaScript 动态更新。
这些选择器在创建用户友好的表单、交互式组件和无障碍界面时非常有用，可以减少对 JavaScript 的依赖。