链接 a 有四种状态: 激活状态, 已访问状态, 未访问状态, 鼠标悬浮停状态
一, 链接使用伪类
- a:link{
- color:blue;
- }
- a:visited{
- color:gray;
- }
- a:hover{
- color:green;
- }
- a:active{
- color:orange;
- }
二, 使用 class 属性进行标识
- a.one:link{
- color:blue;
- }
- a.one:visited{
- color:gray;
- }
- a.one:hover{
- color:green;
- }
- a.one:active{
- color:orange;
- }
- a.two:link{
- color:green;
- }
- a.two:visited{
- color:red;
- }
- a.two:hover{
- color:blue;
- }
- a.two:active{
- color:orange;
- }
- <a href="https://www.baidu.com" target="_blank" class="one"> 百度 </a>
- <a href="https://cn.bing.com/" target="_blank" class="two">bing</a>
三, 其他元素使用 hover ,active 伪类
其他标签例如 p,div,h1 都可以使用 hover 和 active 标签
- p:hover{
- color:green;
- }
- p:active{
- color:orange;
- }
- div:hover{
- color:blue;
- }
- div:active{
- color:gray;
- }
- <p>CSS p 标签 </p>
- <div>CSS div 标签 </div>
但是需要考虑浏览器版本的兼容问题,
IE6 及更早版本, 支持 <a> 元素的 4 种状态, 但是不支持其他元素的 hover 和 active .
四, 伪类的顺序问题
LInk> Visited> Hover> Active
1. a:hover 必须置于 a:link 和 a:visited 之后, 才有效
2. a:active 必须置于 a:hover 之后, 才有效
- a:active{
- color:orange;
- }
- a:hover{
- color:green;
- }
- a:link{
- color:blue;
- }
- a:visited{
- color:gray;
- }
上述顺序, 伪类将不会有效
五, 伪类名称对大小写不敏感
a:Link{ color:blue; }
来源: http://www.bubuko.com/infodetail-3133593.html