我们在点击超链接的时候,会发现
- 未点击
- 鼠标放上去悬浮着
- 鼠标点下去不松开
- 点击完发生链接之后
这四个状态,链接的文本会发生不一样的状态,这样的效果就是用CSS的伪类选择器来实现。
正确的CSS顺序应该是
1. a:link
2. a:visited
3. a:hover
4. a:active
Why?
因为这四个CSS的优先级是一样的,所有后者会覆盖前者。
从实现的步骤来分析,就应该是这样排列才对。
用户的操作步骤是
1. 还没有点击链接
那么只有a:link
这一条样式生效,用户看到的是没有点击的样式。
2. 鼠标移上去悬浮在链接上
那么a: link
和a: hover
这两条生效,由于a: hover
在后面,所以样式3覆盖了样式1,显示的是鼠标移上去悬浮在链接上这个样式
3. 鼠标按了下去
那么a:link
、a:hover
和a:active
这三条生效,a:active
覆盖了前两者,显示出来的就是鼠标点击时候的样式。
4. 点击完发生链接之后
那么a: visited
这一条永久生效,显示出来的就是链接后的样式。
总之,必须是,
a: visited
a:hover
-
a:active
这三条的顺序不能换,必须这样,而a:link
可以放在第一位或者第二位,记忆方法,“VHA”。