HTML/CSS：伪类选择器的行为不符合预期答案

【问题标题】：HTML/CSS: pseudo-class selector not behaving expectedlyHTML/CSS：伪类选择器的行为不符合预期
【发布时间】：2012-06-10 23:41:39
【问题描述】：

以下代码应展示预期的功能：

    <head>
        <style>
        a:active
        {
            color:teal;
        }
        a:hover
        {
            color:green;
...  
...  
...  

    <body>
        <a href="http://www.google.co.uk">Googs!</a>
...

See entire code here

【问题讨论】：

我在这里看不到问题。 jsfiddle.net/jfeltis/8GVNp/1
您希望看到什么？你看到了什么？
@Joe 好吧，你确实改变了规则:P
不，这不是一个序列。问题是，例如，a:hover 和a:visited 具有完全相同的特异性——一个不会覆盖另一个。因此，无论您最后在 CSS 中添加什么，都是有效的规则。就这样。但是，a:visited:hover 比 a:visited 或 a:hover 更具体，所以放在哪里都没有关系。
@popstack 这是正式的规范：w3.org/TR/CSS21/selector.html

标签： html css anchor selector pseudo-class

【解决方案1】：

切换你的 CSS 规则。

...
a:hover{color: #000;}
a:active{color: #c0c0c0;}
...

【讨论】：

好的，正确的顺序是链接、悬停、活动（和访问）。为什么这样？指向任何文档的指针...？
@popstack 这是一篇关于 CSS 优先级如何工作的不错的文章。 css-tricks.com/specifics-on-css-specificity

【解决方案2】：

看起来不错，我假设省略号代表右括号。您是否以另一种样式覆盖页面更深处的级联？另外，我更喜欢确保详细说明样式标签：

<style type="text/css">

【讨论】：

浏览器一直使用"text/css" 作为默认类型，甚至在 HTML5 正式建立这一点之前，所以它从来没有真正的必要。否则，你不可能有内联样式属性！
对不起。我的错。对论坛来说还是比较新的。看起来你已经排序了。祝你好运。