Q: 我试着将css应用到超链接,但是它不正常工作。为什么?是不是因为浏览器太“愚蠢”?
A: 通常来说是因为浏览器太“愚蠢”了,但那不是我要说的,更可能的原因是你把超链接的样式表的顺序写错了。超链接的样式表的顺序应该是"link-visited-hover-active",简记为"LVHA"。
出现这种状况的原因为:每一个selector都有specificity。如果2个selectors的作用于同一个元素,那么specificity高的那个”赢了“。所以:
P.hithere
{
color
:
green
;
}
/*
specificity = 1,1
*/
P
{
color
:
red
;
}
/*
specificity = 1
*/
这样class为hithere的段落的字体都是绿色的,而不是红色的。2个selector都作用于p上,并且都设置字体的颜色,所以more-specificity的selector赢了。
Aside: this only comes into play when the same property is involved. Thus:
P.hithere
{
color
:
green
;
}
/*
specificity = 1,1
*/
P
{
font-family
:
Courier
;
}
/*
specificity = 1
*/
All paragraphs will be in Courier, but those with a class of hithere will be in Courier and green in color.
现在来看超链接的伪类,他们的specificity都相同
A:link
{
color
:
blue
;
}
/*
specificity = 1,1
*/
A:active
{
color
:
red
;
}
/*
specificity = 1,1
*/
A:hover
{
color
:
magenta
;
}
/*
specificity = 1,1
*/
A:visited
{
color
:
purple
;
}
/*
specificity = 1,1
*/
他 们都作用于超链接,在某些情况下多个selector会作用于一个上面。比如,一个没有访问过的超链接,当把鼠标移上去上去点时,"hover"和 "active"都会被触发,而由于所有的selector都有同样的specificity,所有最后申明的slector获胜。这样, "active"的selector将永远不会被触发。如果一个超链接已经被访问过了,由于所有的selector的specificity都相同,而 visited左后申明,所有前3个selector将永远不会被应用到已经访问过的超链接上面去。
这就是问什么我们要按照下面的顺序来申明:
A:link
A:visited
A:hover
A:active
前2个的顺序随便,因为一个超链接不可能同时已经被访问了和没有被访问。(link意味着没有被访问)。
css2允许这样写:
A:visited:hover
{
color
:
maroon
;
}
/*
specificity = 2,1
*/
A:link:hover
{
color
:
magenta
;
}
/*
specificity = 2,1
*/
A:hover:active
{
color
:
cyan
;
}
/*
specificity = 2,1
*/
它们的speciaficity都相同,但是他们不可能出现同时发生的情况,所以不讲究次序。