Наследование CSS - свойство цвета

Question

Возможно, что-то действительно простое здесь, поскольку я совершенно новичок в этом, но я не понимаю, почему в приведенном ниже коде элементы <a> и <h2> не наследуют свойство color (белый) от класса .hero. Упростите код как можно больше.

HTML-:

<section class="hero container"> 
    <h2>A header!</h2> 
    <p>Some stuff!!!</p> 
    <a href="something.html">Linky</a> 
</section> 

CSS-:

a { 
    color: #648880; 
} 

h2 { 
    color: #648880; 
} 

.hero { 
    color: #fff; 
} 

Результатом этого кода является то, что <p> элемент имеет текст ж/цвет #fff, как указано в .hero классе - который как ожидалось. Однако элементы <a> & <h2> имеют цвет #6488880, как указано в селекторах элементов для <a> & <p>.

Тот же вопрос продемонстрировал в JSFiddle here

не должны атрибут .hero класса color быть переопределение атрибут color в элементе селекторы? Неужели я совершенно непонимаю специфику? Конечно, я могу использовать .hero a или .hero h2, но я не понимаю, почему я должен.

Answer 1

Почему вы ожидали, что свойство, указанное родителем, переопределит значение, указанное для дочернего элемента?

Спецификация относится к способу определения приоритетов правил Выбор того же элемента. Специфика правила для родителя (.hero) не имеет отношения к специфике правила для его детей (a).

В этом случае по умолчанию color на элементе a есть inherit. Однако вы явно указали другой цвет. Никакая определенная специфика или !important на родителях не может привести к переопределению явного цвета, указанного для дочернего элемента.

Answer 2

Вы устанавливаете элементы определенного цвета. Установка цвета родителя не отменяет этого. Вы должны быть более конкретными в отношении этих элементов.

.hero a, 
.hero h2{ 
    color: inherit; 
} 

This article может помочь.