在修改页面样式时出现链接颜色不按正常显示,发现是因为定义的顺序不对,正确的顺序应该是。
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 */