css-a与a:link的一些认识

1、a元素有四种状态:

a:link    {color:blue;}//未点击的链接状态
a:visited {color:blue;}//已点击的连接状态
a:hover {color:red;}//鼠标悬浮时的状态
a:active {color:yellow;}//鼠标点下去的时的状态

2、如果设置了:

a{
color: black;
font-size:20px;
}

那么四种状态会继承a中它们没有的声明,但是四种状态中的声明优先级高于a中的。比如

a:hover   {color:red; font-size:40px;}

那么hover状态下,字体将由link或visited状态下的20px(继承自a)变为40px(hover自己的);

3、没有href属性,将没有a:link和a:visited的状态。

4、只设置a的样式,不设置四种状态的样式,那么四种状态会都继承a的样式。

5、CSS标准顺序是:link/visited/hover/active,他们优先级相同。比如未访问时鼠标悬停,将触发link/hover,因为优先级相同,所以将匹配最后一个样式,即hover。所以如果按link/hover/visited/active排序,那么链接访问后,将无法实现hover的样式,因为此时将触发link/hover/visited,最终匹配visited的样式。

6、结合伪类:比如想要悬停在为访问链接上是一种样式,悬停在已访问链接上是另一种样式,可以使用:

a:link:hover{
//
} a:visited:hover{
//
}

不过老古董IE6不支持。

上一篇:JS组件系列——再推荐一款好用的bootstrap-select组件,亲测还不错


下一篇:springboot整合Quartz实现定时任务