Question

悬停功能仅在访问链接时有效。在访问之前，当链接悬停时，颜色不会改变。

https://jsfiddle.net/raushankumar0717/xzggq9ex/

a:visited{
color:#ee9a00;
}

a:hover{
color:#ff0000;
}

a:link{
color:#008b45;
}

<h3>Testing Link pseudo class workings:</h3>
<a href="https://en.wikipedia.org/wiki/Stack_Overflow">Link</a>

为什么需要正确的伪类声明顺序，我的意思是当我们将悬停在链接上时，它应该根据a：hover进行样式，而不管声明的顺序。

而且我知道顺序很重要，因为它决定了特异性，但我认为伪类是html元素的动态。当我们将光标悬停在链接上时，此时元素的状态是悬停的，所以它应该根据样式规则a：hover而不管顺序。

Answer 1

这就是CSS的工作原理（顺序很重要）。对于样式链接，伪类的顺序是：

Link（如果您未访问此网址，则应用）
Visited（如果您访问了href指向的网址，则会应用）
Hover（如果鼠标悬停在标记上，则应用）
Active（如果您正在与标签互动时使用 - 按下鼠标等）

订单之所以重要，是因为CSS Specificity。您编写的规则都具有相同的特异性，因此会受到顺序的影响（最后写的规则将覆盖之前的书面规则）。

请注意，:hover不适用于那些使用键盘的人。您可以使用:focus伪类来为这些用户提供相同的体验。

＆＃13;

a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover,
a:focus {
  text-decoration: underline;
}

a:active {
  color: red;
}

＆＃13;

<a href="#">This is a link</a>

＆＃13;

Answer 2

您的代码顺序应该是这样的

＆＃13;

a:link{
color:#008b45;
}

a:visited{
color:#ee9a00;
}

a:hover{
color:#ff0000;
}

＆＃13;

<h3>Testing Link pseudo class workings:</h3>
<a href="https://en.wikipedia.org/wiki/Stack_Overflow">Link</a>

＆＃13;

Answer 3

您需要以正确的顺序声明CSS指令。 Hover指令应该最后声明才有效。

a:visited{
  color:#ee9a00;
}

a:link{
  color:#008b45;
}

a:hover{
  color:#ff0000;
}

查看此示例：https://jsfiddle.net/xzggq9ex/3/

祝你好运：）

Answer 4

这是因为CSS Cascade规则。如果具有相同属性的多个规则可以应用于同一个元素，并且它们来自相同的来源并具有相同的特异性，那么代码中最后一个属性＆＃34;胜出＆＃34;。

在您的示例中，所有选择器都来自相同的来源（作者样式）并具有相同的特异性（0-1-1）。因此，如果没有访问链接和，它将被悬停，它将被第2和第3个选择器匹配，第3个选择器将获胜。如果它被访问，则它由第一和第二选择器匹配，第二选择器获胜。

这就是为什么你应该订购链接伪类，以便＆＃34;非交互式＆＃34;那些（：link和：visited）不会＆＃34; win＆＃34;通过＆＃34;互动＆＃34;其中（＆＃34;：hover＆＃34;，＆＃34;：active＆＃34;和＆＃34;：focus＆＃34;）。＆＃34;链接，访问，悬停，焦点，活动＆＃34;秩序是共同的良好做法。

或者，您可以组合伪类，例如a:visited:hover，甚至为悬停已访问和未访问的链接设置了不同的样式。

Answer 5

a：link {color：＃008b45;} a：visited {color：＃ee9a00;} a：hover {font-size：20px;颜色：＃ff0000;}

通过测试工作的链接类：

点击我!!!!

Answer 6

在询问这些基础知识之前，最好先阅读this。

/* unvisited link */
a:link {
    color: #FF0000;
}

Answer 7

链接适用于您尚未访问的页面，并且优先于悬停，因为它是CSS中的最后一项。您可以使用下面的CSS强制悬停，但没有任何实际好处：

a:hover{
    color:#ff0000 !important;
}

编辑：很多投票，我不推荐它......

为什么a：hover不起作用，如果它没有在样式表中以正确的顺序声明？

7 个答案:

通过测试工作的链接类：