ijd8.COM

A simple blog for an old Ma Nong.

关于 CSS 中 link、visited、hover、active 正确顺序

Permalink

在修改页面样式时出现链接颜色不按正常显示,发现是因为定义的顺序不对,正确的顺序应该是。

关于 CSS 中 link、visited、hover、active 正确顺序

CSS: 链接样式
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:linka:hover两种属性,后面的属性会覆盖前面的属性定义
  • 鼠标经过的“已访问链接”同时拥有a:visiteda:hover两种属性,后面的属性会覆盖前面的属性定义

样式说明:

  • a:link 未访问的链接
  • a:visited 已访问的链接
  • a:hover 鼠标划过链接
  • a:active 已选中的链接

其顺序可以这样简记

plaintext: 爱恨原则 LV/HA
1
2
Link, Visited, Hover, Active
L, V, H, A

实际上,linkvisited 的位置互换是不会有影响的,只要遵循上面的两条规则就可以。另有多事的老外建议下面比较完善的写法,如果不嫌麻烦也可以照着写:

CSS: 比较完善的写法
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 */

Write a Comment

Submit Comment Login
Based on Golang + fastHTTP + youdb | go1.16 Processed in 9ms