为什么.foo a:link,.foo a:visited {}选择器覆盖a:hover,a:active {}在CSS中的选择器?

前端之家收集整理的这篇文章主要介绍了为什么.foo a:link,.foo a:visited {}选择器覆盖a:hover,a:active {}在CSS中的选择器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
示例代码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>

我期待的是什么

链接将在悬停时显示为红色.

我得到的

链接在悬停时显示为绿色.

问题:

>为什么在.foo中定义的颜色是:link,.foo a:visited
选择器覆盖a:hover,a:active?这是怎么回事?
>我明白,我可以解决它,并得到我期望的取消注释
已注释的代码.但是,我想知道我们如何纠正
.foo a:link,.foo a:访问的选择器,使它不
覆盖a中定义的颜色:hover,a:active?

如果我明白了http://www.w3.org/TR/CSS21/cascade.html#specificity(谢谢BoltClock),这是代码中各种选择器的特殊表.

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

所以,为.foo a:link定义的样式覆盖a:hover的样式,当链接以及hover伪类适用于类foo的A元素时.

类似地,为.foo a:visited定义的样式覆盖a:hover的样式,当访问以及hover伪类适用于类foo的A元素时.

解决方法

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

那么,在spec中有一个注释,当使用所有这些规则的多个规则应用于同一个元素时,如何处理链接和动态伪类,这就解释了为什么需要按照这个顺序设置链接选择器:

Note that the A:hover must be placed after the A:link and A:visited rules,since otherwise the cascading rules will hide the ‘color’ property of the A:hover rule. Similarly,because A:active is placed after A:hover,the active color (lime) will apply when the user both activates and hovers over the A element.

无论如何,我想要做的一点是,所有四个伪类,伪类,具有相同的特异性.关于特定性的一切都适用.在这种情况下,在一堆同样具体的选择器中,应用最后一个规则.每个伪类的触发时间或方式都不相关.

现在,.foo选择器的简单介绍使您的第二组链接/访问规则覆盖您的第一组链接/访问样式和悬停/活动样式,强制该类中的元素中的链接始终显示为绿色,直到添加悬浮/活动风格与.foo选择器.

对不起,如果我的回答似乎是缝合或滑倒,我现在在我的iPhone上打字,这很难想到这里…

原文链接:https://www.f2er.com/css/216349.html

猜你在找的CSS相关文章