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}

我觉得可以，没有机会尝试，抱歉。

编辑

这更好地解释了这种情况：“a”标签何时不会继承父标签的颜色属性？

嗯...好的，我刚刚看到了你漂亮的 jsfiddle 示例。这是非常好的。删除href似乎并不能解决它，但我的解决方案仍然有效。