CSS中a标签样式的“爱恨”原则:定义链接样式的四个伪类,a标签 链接样式 伪类
CSS中a标签样式的“爱恨”原则:定义链接样式的四个伪类
易采站长站,站长之家为您整理了CSS中a标签样式的“爱恨”原则:定义链接样式的四个伪类的相关内容。
鼠标移入时,并没有变黄。而是当这个链接已经被访问过后,鼠标移入才变黄:
复制代码代码如下:a:visited{color:red;}
a:hover{ color:yellow;}
a:link{ color:blue;}
a:active{ color:green;}
这是因为,一个鼠标经过的未访问的链接同时拥有a:link,a:hover两种属性,在上述的CSS样式中,a:link离他最近,先满足a:link,而放弃a:hover的重复定义。
而使用LVHA顺序声明后,它首先检查a:hover的符合标准,先变色。
所以说,为了符合浏览器解释CSS遵循的"就近原则"。我们在定义CSS中,宜将最一般的条件放在最上面,并依次向下,最下面放最特殊的。
在W3C规范中,也规定了链接的声明顺序:
在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
定义局部链接样式
在CSS中写上a:link{}这样的定义会使整个页面的链接样式改变,但有些局部链接需要特殊化,这个问题也不难解决,只要在链接样式定义的前面加上指定的id或class就可以了。
复制代码代码如下:#sidebar a:link, #sidebar a:visiteid {
color:#FF0000;
text-decoration:none;
}
#sidebar a:hover, #sidebar a:active {
color:#000000;
text-decoration:underline;
}
HTML调用:
复制代码代码如下:
class的定义方法和id相同,只要将#sidebar改为.sidebar就行了,还有一种方法是直接定义链接的样式,那样更直接,不过调用时比较麻烦,需要给每个特定的链接加上定义的代码。
复制代码代码如下:a.redlink a:link, a.redlink a:visiteid {
color:#FF0000;
text-decoration:none;
}
a.redlink a:hover, a.redlink a:active {
color:#000000;
text-decoration:underline;
background:#FFFFFF;
}以上就是关于对CSS中a标签样式的“爱恨”原则:定义链接样式的四个伪类的详细介绍。欢迎大家对CSS中a标签样式的“爱恨”原则:定义链接样式的四个伪类内容提出宝贵意见