在修改页面样式时出现链接颜色不按正常显示，发现是因为定义的顺序不对，正确的顺序应该是。
1
2
3
4
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}
需要遵循的两条规则
- a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
- a:active 必须被置于 a:hover 之后，才是有效的
因为 CSS 遵循就近原则，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。
原理
- 鼠标经过的“未访问链接”同时拥有
a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义 - 鼠标经过的“已访问链接”同时拥有
a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义
样式说明：
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标划过链接
- a:active 已选中的链接
其顺序可以这样简记
1
2
Link, Visited, Hover, Active
L, V, H, A
实际上，link 和 visited 的位置互换是不会有影响的，只要遵循上面的两条规则就可以。另有多事的老外建议下面比较完善的写法，如果不嫌麻烦也可以照着写：
1
2
3
4
5
6
a { color: white; text-decoration: none; } /* bookmark */
a:link { color: red; } /* regular link */
a:visited { color: green; text-decoration: strikethrough; } /* visited link */
a:visited:hover { color: blue; text-decoration: underline overline; } /* visted hover link */
a:hover { color: yellow; text-decoration: underline overline; } /* hover link */
a:active { color: orange; text-decoration: underline overline; } /* active link */