Общий селектор севера - нечетное поведение

Насколько я понимаю, общий селектор sibling в CSS выбирает нисходящих братьев и сестер элемента.Общий селектор севера - нечетное поведение

Рассмотрит следующий код:

<head> 
<style> 
h3 ~ div { 
    color: #FF00FF; 
} 
</style> 
</head> 
<body> 
    <h3>Header 3</h3> 
    <div>Sibling divivion</div> 
    <p> 
     <p>Nested paragraph</p> 
     <div>Nested division</div> 
    </p> 
</body>

Я бы ожидать, что общий селектор родственного охватить все нисходящие брат и сестра h3, которые DIV элементов.

Может кто-нибудь объяснить, почему выбрано «Вложенное подразделение»? Я не думаю, что это брат h3?

источник

2014-12-11 Peter

BTW, я бы не использовал термин «нисходящие братья и сестры», чтобы избежать возможных недоразумений; было бы более правильным сказать «следующие братья и сестры». –

div фактически является родственным элементом h3. Вы не можете иметь p элемента и div элемента внутри p элемента: «Р элемент представляет собой пункт Он не может содержать элементы уровня блока элементов (в том числе самого P).»

Ссылка: 9.3.1 Paragraphs: the P element

Когда браузер встречает второй абзац, он закончится первый абзац, поэтому второй пункт и div элемент заканчивается после первого абзаца:

<h3>Header 3</h3> 
<div>Sibling divivion</div> 
<p></p> 
<p>Nested paragraph</p> 
<div>Nested division</div> 
<p></p>

Конечный тег для абзаца не является обязательным, поэтому абзац заканчивается либо конечным тегом, либо начинается следующий элемент блока. В предполагаемом закрывающем теге для первого абзаца отсутствует стартовый тег и заканчивается как отдельный абзац.

источник

2014-12-11 22:15:10 Guffa

О, хватит, только что опубликовал то же самое. +1 –

Спасибо! Я ценю ваше время и объяснение. – Peter

Общий селектор севера - нечетное поведение

ответ

Смежные вопросы