Наследуйте цвет и подчеркивание цвета по ссылкам

Question

У меня возникли проблемы с получением зеленого цвета на анкерный элемент (a) в пределах #container.

В этой скрипкой:

http://jsfiddle.net/lasseedsvik/DnhHb/2/

HTML

<p> 
    <a href="">Green</a> 
</p> 

<div id="container"> 
<p> 
    <a href="">Green also</a> 
</p> 
<p> 
    <div><div><a href="">Also Green</a></div></div> 
</p> 
<p> 
    <h3><a href="">Red</a></h3> 
</p> 
<p> 
    <span style="color:yellow"><a href="">Yellow</a></span> 
</p> 
</div> 

CSS

* { 
    font-size: inherit; 
} 

a { 
    color: green; 
} 

#container a { 
    color: inherit; 
    font-size: inherit;  
} 

p { 
    font-size: 18px; 
} 

h3 { 
    color: red; 
    font-size: 28px; 
} 

мне удалось подобраться б y, используя свойство inherit на #container a, но проблема в том, что 2-я и 3-я ссылки не «возвращаются» к зеленому цвету.

Моя первоначальная проблема, которая почти решена здесь, заключалась в том, что ссылки, которые имели <h2> или другие цвета, которые отличались от зеленых, но всегда имели зеленый текст.

Содержимое контейнера создается редактором WYSIWYG, поэтому у меня нет большого контроля над его содержимым.

Answer 1

Исходная задача выглядит следующим образом:

Задавая следующий CSS:

a { color: green; } 
#container a { color: inherit; } 

OP хотел иметь зеленый цвет по умолчанию для <a> элементов, , если его предки не имеют заданного цвета, и в этом случае элемент <a> должен наследовать.

<a> was colored green 
<.. id="container"> <*> <a> was colored black 
<h3 style="color: red"> <a> should be colored red 
<span style="color: yellow"> <a> should be colored yellow. 

Проблема заключалась в том, что вторая <a> выше, должны быть окрашены зеленый вместо черного. Причина, по которой это делается черным, заключается в том, что не существует такой вещи, как HTML-элемент с неопределенным цветом, поскольку CSS по умолчанию для браузера добавляет вычисленный стиль, который делает его черным.

Что первоначально захотел ОП, можно назвать Селективный наследование CSS, который после многих исследований кажется невозможным с текущей реализацией CSS.

Вышеупомянутое может быть легко выполнено, если CSS реализовал значение ключевого слова/свойства, подобное inherit, возможно, получившее название inherit-user-defined, которое только наследует значения из пользовательских, не связанных с браузером стилей.

Я знаю, что это на самом деле не отвечает на вопрос, но я думаю, что это будет полезно для читателей, которые будут искать это, поскольку принятый ответ на вопрос был неожиданным для некоторых из нас.

Answer 2

Просто удалите правило для

#container a { 
    color: inherit; 
    font-size: inherit;  
} 

Answer 3

Смотрите эту link

использование

* { 
    font-size: inherit; 
} 

a { 
    color: green; 
} 

#container a { 

} 

p { 
    font-size: 18px; 
} 

h3 a{ 
    color: red; 
    font-size: 28px !important; 
} 
span a{ 
    color: yellow; 
} 

Answer 4

Проверить это http://jsfiddle.net/DnhHb/5/

Я просто Убрана color:inherit из Container a класса

Answer 5

добавить этот CSS:

#container p a { 
    color: green; 
} 

#container div a { 
    color: green; 
} 

#container span a { 
    color: yellow; 
} 

Теперь удалите встроенный CSS, так как он не нужен.

Причина: поскольку вы сказали ему наследовать, вам нужно явно объявить каждый экземпляр, то есть вам нужно сказать, что #container p a должен быть зеленым.

Посмотреть исправлено: http://jsfiddle.net/DnhHb/6/

Также см лучший отформатированный вариант: http://jsfiddle.net/DnhHb/9/