为什么.foo a：link，.foo a：visited {} selector在CSS中覆盖a：hover，a：active {} selector？ [英] Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?

查看：153
本文介绍了为什么.foo a：link，.foo a：visited {} selector在CSS中覆盖a：hover，a：active {} selector？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

示例代码： 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; 
} 
 
 / *可能的修复程序* / 
 / * 
 .foo a：hover，.foo a：active {
 color：red; 
} 
 * / 
< / style> 
< / head> 
< body> 
< div class =foo> 
< a href =http://example.com/>示例< / a> 
< / div> 
< / body> 
< / html>

我预期的：



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



我得到了什么：



悬停时链接显示为绿色。



问题：


  1. 为什么中定义颜色 .foo a：link，.foo a：visited
    选择器重写 a：hover，a：active 中的一个？这是怎么回事？

  2. 我明白我可以通过取消注释
    注释的代码来修复它并获得我的期望。但是，我想知道我们如何更正
    .foo a：link，.foo a：visited 选择器，以便它不会
    覆盖中定义的颜色 c：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 
  pre> 
 
 
因此，为 .foo a：link 定义的样式覆盖当链接以及 hover 伪类应用于A时，a：hover 同样，为 .foo定义的样式a：访问的  访问以及时，覆盖 a：hover 的样式c> hover 伪类应用于 foo 的A元素。
解决方案
当您第一次使用CSS时，您可能已经了解了LoVe-HAte助记符，用于指定链接选择器的顺序（ a：link ， a：visited ， a：hover ， a：active ）。你是否曾经想过为什么选择这个助记符？
 
 
 
那么， spec 了解当使用所有规则应用于同一元素时如何处理链接和动态伪类，这解释了为什么你需要按照以下顺序设置链接选择器：
 
 
请注意，A：悬停必须放置在A：链接和A： ，因为否则级联规则将隐藏A：hover规则的'color'属性。类似地，因为A：active放置在A：hover之后，当用户激活并悬停在A元素上时，将应用活动颜色（lime）。
 
 
无论如何，我试图在上面的点是所有四个伪类，作为伪类，具有相等的特异性。关于特殊性的一切都适用。在这种情况下，在一组同样特定的选择器中，应用最后一个规则。 
 
 
 
现在，简单介绍 .foo 选择器会导致您的第二组链接/访问规则覆盖您的第一组链接/访问样式和悬停/活动样式，强制该类的元素中的链接始终显示为绿色，直到您添加悬停/           对不起，如果我的答案似乎缝合或slipshod的方式，我现在在我的iPhone上打字，这是很难想到这里...  
 
Sample code: 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>

What I was expecting:



The link would appear red on hover.



What I get:



The link appears green on hover.



Questions:
    

  1. 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?   
    2. 

  2. 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?
    3. 







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

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.



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.
 解决方案 
When you first started with CSS, you might have learned about the LoVe-HAte mnemonic for the order in which to specify link selectors (a:link, a:visited, a:hover, a:active). Have you ever wondered why this mnemonic was chosen?



Well, there's a note in the spec on how the link and dynamic pseudo-classes are treated when multiple rules using all of them apply to the same element, which explains why you need to set link selectors in that order:

  
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.


Anyway, the point I'm trying to make above is that all four pseudo-classes, being pseudo-classes, have equal specificity. Everything else about specificity applies. In this case, out of a bunch of equally specific selectors, the last rule is applied. When or how each pseudo-class is triggered is never relevant.



Now, the simple introduction of the .foo selector causes your second set of link/visited rules to override your first set of link/visited styles and the hover/active styles, forcing links in elements with that class to always appear green until you add hover/active styles with the .foo selector.






Sorry if my answer seems stitched-up or slipshod by the way, I'm typing this on my iPhone right now and it's pretty hard to think out here...


                        
这篇关于为什么.foo a：link，.foo a：visited {} selector在CSS中覆盖a：hover，a：active {} selector？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆