Специфика 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, похоже, не помогает, но мое решение все еще работает.