编辑“︁CSS UI状态伪类”︁（章节）

= CSS UI状态伪类 =

'''CSS UI状态伪类'''（CSS UI State Pseudo-classes）是一组用于根据用户界面元素的状态来应用样式的特殊选择器。它们允许开发者根据元素的交互状态（如悬停、聚焦、激活等）动态改变样式，从而提升用户体验。这类伪类在表单控件、链接和其他交互式元素中尤为常用。

== 概述 ==
UI状态伪类不同于结构伪类（如<code>:nth-child</code>），它们关注的是元素的'''动态状态'''而非文档结构。这些状态通常由用户行为（如鼠标悬停、键盘输入）或元素属性（如复选框是否被选中）触发。

== 常见的UI状态伪类 ==
以下是CSS中常用的UI状态伪类及其用途：

=== <code>:hover</code> ===
当用户将鼠标悬停在元素上时触发。

<syntaxhighlight lang="css">
/* 鼠标悬停时改变按钮背景色 */
button:hover {
    background-color: #4CAF50;
}
</syntaxhighlight>

=== <code>:active</code> ===
当元素被激活（如鼠标点击按下时）触发。

<syntaxhighlight lang="css">
/* 按钮被点击时改变样式 */
button:active {
    transform: scale(0.98);
}
</syntaxhighlight>

=== <code>:focus</code> ===
当元素获得焦点（如通过键盘Tab键或鼠标点击）时触发。

<syntaxhighlight lang="css">
/* 输入框获得焦点时添加边框 */
input:focus {
    border: 2px solid #2196F3;
}
</syntaxhighlight>

=== <code>:checked</code> ===
适用于单选按钮（<code>radio</code>）或复选框（<code>checkbox</code>）被选中的状态。

<syntaxhighlight lang="css">
/* 选中复选框时改变相邻标签的颜色 */
input[type="checkbox"]:checked + label {
    color: green;
}
</syntaxhighlight>

=== <code>:disabled</code> 和 <code>:enabled</code> ===
分别匹配禁用和启用的表单元素。

<syntaxhighlight lang="css">
/* 禁用按钮的样式 */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
</syntaxhighlight>

=== <code>:valid</code> 和 <code>:invalid</code> ===
根据表单输入内容的有效性应用样式（需配合HTML5验证属性如<code>required</code>或<code>pattern</code>）。

<syntaxhighlight lang="css">
/* 无效输入时显示红色边框 */
input:invalid {
    border-color: #f44336;
}
</syntaxhighlight>

== 组合使用示例 ==
多个伪类可以组合使用以实现复杂交互效果：

<syntaxhighlight lang="css">
/* 悬停且未禁用的按钮样式 */
button:hover:not(:disabled) {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
</syntaxhighlight>

== 实际应用案例 ==
=== 动态表单反馈 ===
通过<code>:valid</code>/<code>:invalid</code>伪类实时提示用户输入是否正确：

<syntaxhighlight lang="html">
<input type="email" required placeholder="输入邮箱">
<style>
    input:valid { border-color: #4CAF50; }
    input:invalid { border-color: #f44336; }
</style>
</syntaxhighlight>

=== 交互式导航菜单 ===
使用<code>:hover</code>和<code>:active</code>增强导航体验：

<syntaxhighlight lang="css">
.nav-item {
    transition: background 0.3s;
}
.nav-item:hover {
    background: #f1f1f1;
}
.nav-item:active {
    transform: translateY(1px);
}
</syntaxhighlight>

== 状态伪类的优先级 ==
UI状态伪类的特异性（Specificity）与普通类选择器相同（0,1,0）。当多个状态同时满足时，CSS遵循以下'''层叠顺序'''（后声明的规则优先）：
# <code>:link</code>
# <code>:visited</code>
# <code>:hover</code>
# <code>:active</code>
# <code>:focus</code>

== 浏览器兼容性 ==
大多数现代浏览器全面支持UI状态伪类，但需注意：
* IE8及以下不支持<code>:checked</code>、<code>:disabled</code>等
* 移动设备上<code>:hover</code>行为可能与桌面不同

== 最佳实践 ==
1. '''渐进增强'''：确保功能在不支持伪类的浏览器中仍可操作
2. '''性能优化'''：避免在<code>:hover</code>上使用耗资源的属性（如<code>box-shadow</code>）
3. '''可访问性'''：配合ARIA属性（如<code>aria-disabled</code>）增强语义

== 总结 ==
UI状态伪类是创建响应式界面的核心工具，通过它们可以：
* 提升用户操作的视觉反馈
* 增强表单的可用性
* 实现无JavaScript的简单交互效果

掌握这些伪类将显著提高你的CSS开发效率与设计灵活性。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS高级选择器]]