[!info] related notes

• 所属 MOC: CSS MOC
• 前置概念: CSS 选择器、伪类与伪元素
• 相关主题: CSS 表单样式, css-transition

伪类状态设计

很多人学伪类，只记成“:hover 会变色”，但在真实项目里，伪类更像交互反馈系统的一部分。

一句话主线

伪类状态设计的目标不是做装饰，而是让用户知道当前元素能不能交互、正在被怎样交互。

最常见的交互状态

:hover

表示鼠标悬停。

:focus

表示元素获得焦点，尤其对键盘导航和表单交互很重要。

:active

表示元素处于按下中的瞬时状态。

:visited

通常用于链接已访问状态。

为什么不能只写 :hover

因为很多交互场景不只靠鼠标：

• 键盘导航依赖 :focus
• 按压反馈依赖 :active
• 表单可用性很大程度依赖焦点态是否清晰

所以一个按钮或输入框的状态设计，通常至少要考虑：

• 默认态
• 悬停态
• 聚焦态
• 激活态

实战建议

• 不要为了“简洁”去掉焦点态却不给替代反馈
• :hover 适合提示可交互性，不应该成为唯一状态反馈
• 状态切换配合 transition 会更自然，但不要过度动画化

最短记忆方式

伪类状态不是点缀，而是交互反馈的一部分；别只写 :hover，忘了 :focus。

Related notes

• CSS MOC