HTML/CSS Link States Demo

这个项目演示了链接（<a> 标签）的不同状态样式，特别是 LVHFA（Link-Visited-Hover-Focus-Active）顺序的重要性。

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

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

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

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

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

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

这就是为什么一定要使用 LVHFA 顺序的原因 —— 它符合状态的触发顺序和优先级顺序。

演示内容

在CSS中，链接的不同状态样式有严格的优先级顺序要求。如果不按照 LVHFA（Link-Visited-Hover-Focus-Active）的顺序来定义样式，后面的样式会覆盖前面的样式，导致某些状态的样式无法正常显示。

下面通过两个例子来说明顺序的重要性：

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

.valid-link:link { color: blue; }
.valid-link:visited { color: purple; }
.valid-link:hover { color: green; }
.valid-link:focus { color: red; }
.valid-link:active { color: yellow; }

2. 测试2：不按LVHFA顺序定义样式（invalid.css）—— 每个状态都可能会被后面定义的状态覆盖，出现各种难以确定的样式效果：

.invalid-link:active { color: yellow; } 
.invalid-link:focus { color: red; }     
.invalid-link:link { color: blue; }     
.invalid-link:visited { color: purple; }
.invalid-link:hover { color: green; }   

各状态说明

• :link - 未访问的链接状态
• :visited - 已访问过的链接状态
• :hover - 鼠标悬停状态
• :focus - 链接获得焦点状态（如通过Tab键选中）
• :active - 鼠标点击瞬间的状态

运行方式

open index.html

注意事项

1. LVHA 顺序很重要，记忆口诀："LoVe HAte"
2. 这个顺序规则仅适用于链接（<a> 标签），不适用于按钮等其他元素
3. 为了演示效果，链接都指向"#"，所以不会真正改变 visited 状态