CSS 为一些特殊效果准备了特定的工具, 我们称之为 "伪类". 其中有四个是我们经常用于定义链接样式的伪类, 下面本篇文章就来给大家介绍一下, 希望对大家有所帮助.
因为我们要定义链接样式, 所以其中必不可少的就是超级链接中的锚标签 --a, 锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法, 它们的写法如下:
a:link, 定义正常链接的样式;
a:visited, 定义已访问过链接的样式;
a:hover, 定义鼠标悬浮在链接上时的样式;
a:active, 定义鼠标点击链接时的样式.
[相关教程推荐: CSS 视频教程 https://www.html.cn/css/video/ ]
示例:
- a:link
- {
- color:#FF0000;
- text-decoration:underline;
- }
- a:visited
- {
- color:#00FF00;
- text-decoration:none;
- }
- a:hover
- {
- color:#000000;
- text-decoration:none;
- }
- a:active
- {
- color:#FFFFFF;
- text-decoration:none;
- }
上面示例中定义的链接颜色是红色, 访问过后的链接是绿色, 鼠标悬浮在链接上时是黑色, 点击时的颜色是白色. 上面示例中定义的链接颜色是红色, 访问过后的链接是绿色, 鼠标悬浮在链接上时是黑色, 点击时的颜色是白色.
上面示例中定义的链接颜色是红色, 访问过后的链接是绿色, 鼠标悬浮在链接上时是黑色, 点击时的颜色是白色. 上面示例中定义的链接颜色是红色, 访问过后的链接是绿色, 鼠标悬浮在链接上时是黑色, 点击时的颜色是白色. 如果正常链接和已访问过的链接样式相同, 鼠标悬浮和点击时的样式相同, 也可以将它们合并起来定义:
- a:link,a:visited
- {
- color:#FF0000;
- text-decoration:underline;
- }
- a:hover, a:active
- {
- color:#000000;
- text-decoration:none;
- }
链接定义的顺序
没有规矩不成方圆, 虽然链接定义写好了, 但它也是有规则的, 如果这四项的书写顺序稍有差错, 链接的效果可能就没有了, 所以每次定义链接样式时务必确认定义的顺序, link--visited--hover-active, 也就是我们常说到的 LoVe HAte 原则 (大写字母就是它们的首字母).
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/14324.html