为什么 .foo a:link, .foo a:visited {} 选择器会覆盖 C-前端问题

Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?(为什么 .foo a:link, .foo a:visited {} 选择器会覆盖 CSS 中的 a:hover, a:active {} 选择器?)

本文介绍了为什么 .foo a:link, .foo a:visited {} 选择器会覆盖 CSS 中的 a:hover, a: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>

我所期待的:

悬停时链接会显示为红色.

The link would appear red on hover.

我得到了什么:

悬停时链接显示为绿色.

The link appears green on hover.

问题:

为什么.foo a:link, .foo a:visited中定义的color选择器覆盖 a:hover, a:active 中的选择器?这是怎么回事?
我知道我可以通过取消注释来修复它并获得我期望的结果注释代码.但是，我想知道我们如何纠正.foo a:link, .foo a:visited 选择器，这样它就不会覆盖 a:hover, a:active?

color

Why does the color defined in .foo a:link, .foo a:visited selector override the one in a:hover, a:active? What's going on?
I understand that I can fix it and get what I expect by uncommenting the commented code. However, I want to know how can we correct the .foo a:link, .foo a:visited selector such that it does not override the color defined in a:hover, a:active?

<小时>

如果我理解 http://www.w3.org/TR/CSS21/cascade.html#特异性正确(谢谢，BoltClock)，这是代码中各种选择器的特异性表.

If I understand http://www.w3.org/TR/CSS21/cascade.html#specificity properly (Thanks, BoltClock), this is the specificity table for the various selectors in the code.

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 和 都为 .foo a:link 定义的样式会覆盖 a:hover 的样式>hover 伪类应用于 foo 类的 A 元素.

So, the style defined for .foo a:link overrides the style for a:hover when both link as well as hover pseudo-classes apply to an A element of class foo.

同样，当 visited 和 时，为 .foo a:visited 定义的样式会覆盖 a:hover 的样式>hover 伪类应用于 foo 类的 A 元素.

Similarly, the style defined for .foo a:visited overrides the style for a:hover when both visited as well as hover pseudo-classes apply to an A element of class foo.

为什么 .foo a:link, .foo a:visited {} 选择器会覆盖 C

问题描述

推荐答案

基础教程推荐