覆盖:访问覆盖:链接:悬停:活动

Question

请考虑以下风格:

a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
#special:link { color: pink }

现在这个加价:

<a href="#">Normal link</a>
<a href="#" id="special">Special link</a>

我希望"特殊"链接是粉红色的,同时保持其他颜色.但是,粉红色取代了其他颜色.

为什么会这样？我该怎么办呢？谢谢.

Answer 1

我认为它与CSS 优先顺序有关.

因为它#special是一个ID,它使得应用的任何元素级样式相形见绌.(这可以在Firefox Firebug/Chrome Inspector中证明,以及继承的样式表如何被ID的样式覆盖).

虽然,考虑到没有"现在的风格"申请:活跃,:访问等.这将是理所当然的这些风格仍然不受影响.然而,对你的悬停进行以下更改似乎会重新开始:

a:hover { color: green !important; }

Answer 2

为什么会这样？

:link伪类的样式适用于所有链接状态,因此它包括:hover,:visited和:active

这是我几年前开始使用CSS时所观察到的.我不知道它是否应该起作用,但它是我看到它如何工作并期望它工作的方式.

所以当你设置一个样式时#special:link,该样式也适用于#special:hover,#special:visited和#special:active

请注意,ID的使用在这里没有太大变化.
如果你使用下面的CSS尝试它,你将有两个链接粉红色......即使是:hover状态

a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
a:link { color: pink }

我该怎么办呢？

您可以!important按照Brad的建议使用,也可以将#special的各种状态样式与常规链接一起设置.

a:link { color: blue }
#special:link { color: pink }
a:visited, #special:visited { color: red }
a:hover, #special:hover { color: green }
a:active, #special:active { color: black }

Answer 3

它的加剧......和订单在这里很重要:

a:hover{
color:green;
}

a:visited{
color:red;
}

这意味着当您将鼠标悬停在它们上方时,未访问的链接将变为绿色,并且当您将鼠标悬停在它们上时,访问过的链接将保持红色.

开关:

a:visited{
color:red;
}

a:hover{
color:green;
}

这意味着当您将鼠标悬停在其上时,访问过的链接和未访问的链接都将变为绿色.我讨厌这些属性的顺序改变行为; 悬停风格应该生效.

a:link{
    color:blue;
}

a.one:hover{
    color:green;
}
a.one:visited{
    color:red;
}

a.two:visited{
    color:red;
}
a.two:hover{
    color:green;
}

<a href=#ddd class=one>One (wont change color on hover when visited)</a> |
<a href=#ddd class=two>Two (always turns green on hover)</a>

Answer 4

这是另一种快速解决方法：

您可以使用:not(:hover)。

#special:link:not(:hover) { color: pink }

演示版