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 priority订单有关。

因为#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 }

我该如何解决？

您可以按照Brad的建议使用!important，也可以将#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;
}

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

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

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

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

<强> DMOE

Answer 5

不，由于它的ID，它不会使用其他颜色，在这种情况下，您应该将其余的操作和颜色添加到ID中。

例如，您拥有的链接，即“特殊”链接，当结束时会说。

好的，我是'...'链接...我的ID是......特别的，所以，我会保留特殊参数。

这就是为什么不会改变。

希望这有帮助，

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

5 个答案: