Css дочерний селектор не работает

Question

Css дочерний селектор не работает

0

Я вникаю в разницу между дочерним и потоковым селектором. В соответствии с документацией, которую я нашел, и к этому вопросу сериалы CSS Child vs Descendant я пишу этот пример:

<div>
    <h2>h2 1</h2>
    <h2>h2 2</h2>
    <section>
    section
        <h1>h1 section son
            <h2>h2 section nephew</h2>
        </h1>
        <h2>h2 section son</h2>
    </section>
    <h2>h2 3</h2>
    <h2>h2 4</h2>
</div>

CSS:

section > h2 {
    color:red;
}

(скрипка здесь: http://jsfiddle.net/armdan/ksB6f/1/)

Я ожидал, что в этом примере "h2 section племянник" не будет выбран, но он выбран и станет красным. Я не понимаю, чего не хватает.

Daniele Armanasco 01 дек. 2013, в 12:35

Источник

Теги:

html

css

css-selectors

2 ответа

2

Есть несколько вещей...

<h2> не может содержаться внутри <h1>.
section > h2 выбирает <h2>, который находится непосредственно под <section> а не как большой дочерний элемент. В последнем случае вам нужно использовать section h2.

Временные решения будут менять ваш код таким образом, чтобы сделать его семантическим:

<div>
    <h2>h2 1</h2>
    <h2>h2 2</h2>
    <section>
    section
        <h1>h1 section son</h1>
        <h2>h2 section nephew</h2>
        <h2>h2 section son</h2>
    </section>
    <h2>h2 3</h2>
    <h2>h2 4</h2>
</div>

Praveen Kumar Purushothaman 01 дек. 2013, в 09:03

1

«это непосредственно под <section> а не как дочерний элемент» Дочерний элемент по определению - это тот, который находится непосредственно под другим элементом.
BoltClock♦ 01 дек. 2013, в 10:59
0

@ BoltClock'saUnicorn Ой, опечатка исправлена. :)
Praveen Kumar Purushothaman 01 дек. 2013, в 11:29

Ещё вопросы

«это непосредственно под <section> а не как дочерний элемент» Дочерний элемент по определению - это тот, который находится непосредственно под другим элементом.
@ BoltClock'saUnicorn Ой, опечатка исправлена. :)

joews · Accepted Answer · 2013-12-01T07-58-00.000Z

Вероятно, это связано с тем, что h1 содержит h2. Если вы измените h1 на элемент, который может содержать h2, например div, он работает так, как вы ожидаете:

<div>
    <h2>h2 1</h2>
    <h2>h2 2</h2>
    <section>
    section
        <div>h1 section son
            <h2>h2 section nephew</h2>
        </div>
        <h2>h2 section son</h2>
    </section>
    <h2>h2 3</h2>
    <h2>h2 4</h2>
</div>

http://jsfiddle.net/Z5CeB/

Предпосылки: спецификация HTML5 для h1 говорит, что она может содержать только текст и "фразировочные элементы", которые:

Эм
сильный
маленький
отметка
сокр
д.ф.н.
я
б
s
U
код
вар
маисовая крупа
KBD
вир
суб
Q
цитировать
пролет
БДО
BDI
уш
WBR
ины
дель
IMG
встраивать
объект
IFrame
карта
площадь
скрипт
NoScript
Рубин
видео
аудио
вход
TextArea
Выбрать
кнопка
метка
вывод
DataList
кейген
прогресс
команда
холст
время
метр

Да, и это всегда было правдой даже до HTML5. Обратите внимание, что при вводе другого тега заголовка после незакрытого тега заголовка он закрывается из-за этого правила, которое не делает закрывающий тег необязательным - это по-прежнему необходимо.
Спасибо, это именно то, чего мне не хватало. Теперь я проверяю DOM и вижу, что браузер ставит племянника h2 в качестве прямого потомка этого раздела!