css - 命名元素内的超链接 css 特异性

Question

http://jsfiddle.net/DkAqZ/9

HTML

<div id="container">
    <div>default black text</div>
    <div><a href="#">default red link</a></div>
    <div id="inner">
        <div>#inner green text</div>
        <div><a href="#">#inner red link or green text?</a></div>
    </div>
</div>

CSS

body {
    color:black;
}
a {
    color:red;
}
a:hover {
    color:orange;
}
#inner {
    color:green;
    font-size:24px;
}

看起来像这样

我不太清楚为什么第二个超链接是红色而不是绿色。 #inner 的特异性不是比a 高吗？此外，字体大小是在 #inner a 上继承的，这使得它更加困惑。

Answer 1

不，我很确定情况并非如此。如果你这样做了:

#inner a { color:inherit}

我认为这可行，没有机会尝试，抱歉。

编辑

这更好地解释了这种情况:when will "a" tag not inherit color attribute of parent tag?

嗯...好吧，我刚看到你漂亮的 jsfiddle 示例。这是非常好的。删除 href 似乎无法解决问题，但我的解决方案仍然有效。