Как выбрать дочерний элемент в CSS?

Question

У меня есть некоторый HTML, который выглядит следующим образом:

<h2>Heading</h2>
<div class='myClass'>
    <h2>Another Heading</h2>
</div>

Предположим, я хочу, чтобы все элементы h2, содержащиеся в div с классом myClass, были подчеркнуты.подходящий CSS-селектор для этого?Обратите внимание, что это для статического файла CSS, а не jQuery.

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

div.myClass > h2 { text-decoration: underline; }

Answer 1

Это должно работать, если у вас нет проблем со спецификой (как это не выглядит из кода) или если вы используете очень старый браузер.

В вашем случае это должно быть то же самое:

div.myClass h2 { text-decoration: underline; }

Возможно, вы захотите посмотреть, работает ли он.

Также, если возможно ... поделитесь http://jsfiddle.net или ссылкой на ваш код.

Answer 2

Если бы мне пришлось угадывать, я бы сказал, что это выглядит как CSS специфичность проблема .Этот селектор правильный.

Используйте инструмент, такой как Firebug , чтобы проверить элемент <h2> и посмотреть, какие другие правила CSS применяются.