为什么.foo a:link、.foo a:visited｛｝选择器会覆盖CSS中的一个:hover、一个:active

示例代码：http://jsfiddle.net/RuQNP/

<!DOCTYPE html>
<html>
<head>
    <title>Foo</title>
    <style type="text/css">
        a:link, a:visited {
            color: blue;
        }
        a:hover, a:active {
            color: red; 
        }
        .foo a:link, .foo a:visited {
            color: green;
        }
        /* A possible fix */
        /*
        .foo a:hover, .foo a:active {
            color: red;
        }
        */
    </style>
</head>
<body>
    <div class="foo">
        <a href="http://example.com/">Example</a>
    </div>
</body>
</html>

我所期待的：

悬停时链接将显示为红色。

我得到的：

悬停时链接显示为绿色。

问题：

为什么color在.foo a:link, .foo a:visited中定义选择器是否覆盖a:hover, a:active中的选择器？怎么回事
我知道我可以通过取消注释来修复它并得到我期望的结果注释的代码。然而，我想知道我们如何纠正.foo a:link, .foo a:visited选择器，使其不是否覆盖a:hover, a:active中定义的color

如果我理解http://www.w3.org/TR/CSS21/cascade.html#specificity这是代码中各种选择器的特定性表。

a:link         - 0 0 1 1
a:visited      - 0 0 1 1
a:hover        - 0 0 1 1
a:active       - 0 0 1 1
.foo a:link    - 0 0 2 1
.foo a:visited - 0 0 2 1

因此，当link和hover伪类都应用于类foo的A元素时，为.foo a:link定义的样式将覆盖a:hover的样式。

类似地，当visited和hover伪类都应用于类foo的A元素时，为.foo a:visited定义的样式将覆盖a:hover的样式。

当您第一次使用CSS时，您可能已经了解了LoVe-HAte助记符，用于指定链接选择器(a:link、a:visited、a:hover、a:active(的顺序。你有没有想过为什么选择这个助记符？

好吧，规范中有一条注释，说明了当使用所有链接和动态伪类的多个规则应用于同一元素时，如何处理链接和动态假类，这解释了为什么需要按以下顺序设置链接选择器：

请注意，A:hover必须放在A:link和A:visited规则之后，否则级联规则将隐藏A:hofer规则的"color"属性。类似地，由于A:active位于A:hover之后，因此当用户激活并悬停在A元素上时，将应用活动颜色(石灰(。

不管怎样，我在上面试图说明的是，所有四个伪类，作为伪类，都具有相同的特异性。关于特异性的其他一切都适用。在这种情况下，在一堆同样特定的选择器中，应用最后一条规则。每个伪类何时或如何被触发从来都不相关。

现在，.foo选择器的简单引入会导致您的第二组链接/已访问规则覆盖您的第一组链接/被访问样式和悬停/活动样式，强制具有该类的元素中的链接始终显示为绿色，直到您使用.foo选择器添加悬停/活动风格。

^{很抱歉，如果我的答案看起来有问题或不正确，我现在正在iPhone上输入，很难在这里思考}

这就是我对它的理解。所有这些伪类都有相同的特殊性，所以最后编写的伪类获胜。现在伪类:link, :visited, :focus, :hover, :active做什么？让我们逐一看看。

a: link{color: red}告诉用户代理在任何状态中将锚元素染成红色。运行以下脚本：

  a:link {
  color: red;
  
  }

<a href="www.stackoverflow.com">Go to stackoverflow </a>

当且仅当链接未被访问，

未访问
悬停的
聚焦(选项卡(
活动(已单击(

因此，a: link{color: red}告诉用户代理在所有上述状态下将红色赋予锚定元素。现在让我们将其与a:hover伪类进行比较。运行以下脚本

a:hover {
  color: red;
  
}

<a href="www.stackoverflow.com">Go to stackoverflow </a>

锚定元件在以下状态下为红色，

悬停的
活动(单击(

我们看到:link和:hover伪类都能够定义hover状态——因此，如果将这两个伪类分配给一个特定的元素，那么最后在css文件中提到的那个就获胜了。这就是我们说:link将覆盖:hover的原因。同样的概念也适用于其他伪类。我想列出每个伪类的作用

a:link {...}设置未访问链接的以下状态
-聚焦(选项卡(
-悬停
-活动(点击(

link状态将覆盖其他所有状态。

a:visited {...}设置已访问链接的以下状态：
-聚焦(选项卡(
-悬停
-活动(点击(

a:visited {...}将覆盖除:link之外的所有其他状态，如果且仅当链接已被访问。

请注意，已访问意味着必须根据用户代理的缓存将其视为已访问。例如，10天前访问的网站可能不在用户代理的缓存中，那么从技术上讲，它将被视为未访问。

a:focus {...}为已访问和未访问的链接设置以下状态：
-聚焦(选项卡(
-悬停
-活动(点击(

CCD_ 38覆盖CCD_ 39和CCD_ 40状态。

a:hover {...}为已访问和未访问的链接设置以下状态：
-悬停
-活动(点击(

a:hover {...}覆盖:active状态

a:active {...}为已访问和未访问的链路设置以下状态：

活动(已单击(

若要修复此问题，请将.foo ...选择器放在第一位，并将!important添加到其他链接/访问的选择器的颜色值中，如下所示：

    a:link, a:visited {
        color: blue;
    }
    a:hover, a:active {
        color: red !important; 
    }
    .foo a:link, .foo a:visited {
        color: green;
    }

无论您将.foo a:link, .foo a:visited选择器放在哪里，它都会覆盖另一个选择器的原因是因为.foo a:link比a:link更具体。(与:visited相同。(因此，.foo ...选择器将始终覆盖a:link,a:visited选择器，因为它有一个父类名称，所以它更具体
(另请阅读@BoltClocks关于LoVe-HAte的回答-这是问题的一部分。(

相关内容

最新更新

热门标签：