HTML/CSS 按钮状态演示

这个项目演示了按钮的不同状态样式，特别是 HFA（Hover-Focus-Active）顺序的重要性。

状态顺序的重要性

按钮状态的顺序是根据用户交互时状态的触发顺序来设计的：

1. 当用户操作按钮时，可能同时触发多个状态：

   • 用鼠标点击时：同时触发 hover（悬停）和 active（点击）状态
   • 用鼠标点击获得焦点时：同时触发 hover（悬停）和 focus（焦点）状态
   • 用键盘Tab键选中时：只触发 focus（焦点）状态

2. 所以样式必须按照“一般到特殊”的顺序来写：

   • :hover 可能和 :focus/:active 同时存在，放最前面
   • :focus 可能和 :active 同时存在，放在中间
   • :active 是最特殊的状态，放最后

如果顺序错误（比如把:active放在:hover前面），当鼠标点击按钮时，:active的样式会被后面的:hover覆盖，导致点击效果无法显示。

演示内容

这个演示通过两个例子来说明顺序的重要性：

1. 测试1：按HFA顺序定义样式（valid-button.css）—— 所有状态都能正常显示

.valid-button:hover { color: green; }
.valid-button:focus { color: yellow; }
.valid-button:active { color: red; }

2. 测试2：不按HFA顺序定义样式（invalid-button.css）—— active状态会被hover覆盖：

.invalid-button:active { color: red; }
.invalid-button:focus { color: yellow; }
.invalid-button:hover { color: green; }

各状态说明

• :hover - 鼠标悬停状态（绿色）
• :focus - 按钮获得焦点状态（黄色）
• :active - 鼠标点击瞬间的状态（红色）
• :disabled - 按钮禁用状态（灰色）

运行方式

open index.html

注意事项

1. 虽然按钮没有像链接那样的:link和:visited状态，但状态顺序的原理是一样的
2. 可以通过点击或按Tab键来观察 focus 状态
3. 禁用状态（:disabled）不受顺序影响，因为它是一个独立的状态