link-specificity

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都相同，但是他们不可能出现同时发生的情况，所以不讲究次序。