«DIV> P» & «Div P» же?
-
08-10-2019 - |
Вопрос
Эй, у меня очевидный вопрос.
Для кода как:
<div>
<p>We want to format this text :)</p>
</div>
Некоторые люди используют селектор, как:
div > p {
something
}
И другие:
div p {
something
}
В чем разница в этом случае? На мой взгляд - никто?
И кстати, не пункт потомка всегда ребенок?! В чем разница между ними? Я читаю w3.org, но не могу получить это :)
Спасибо!
Решение
Простой:
div > p
Затрагивает только прямые дети.
div p
Захватывает внуки, Грансграничники и т. Д. также. (Не будет иметь значение в вашем примере)
Селектор ребенка не поддерживается IE6.
Другие советы
Пекка объяснила это теоретически в его ответ. Отказ На основе его ответа, а также мой ответ на другой вопрос о >
комбинатор, Я предоставлю иллюстрацию, модифицированную для решения этого вопроса.
Рассмотрим следующий блок HTML и ваш пример селекторов CSS. Я использую более сложный пример, чтобы я мог показать вам разницу между обеих ваших селекторов:
<div>
<p>The first paragraph.</p> <!-- [1] -->
<blockquote>
<p>A quotation.</p> <!-- [2] -->
</blockquote>
<div>
<p>A paragraph after the quotation.</p> <!-- [3] -->
</div>
</div>
Который <p>
S выбран, с помощью которых селекторы?
Прежде всего, все они совпадают div p
потому что они <p>
Элементы расположены где угодно внутри а. <div>
элемент.
Что делает div > p
Более конкретный, который просит следующий вопрос:
Который <p>
S выбран div > p
?
Выбранный
Этот параграф
<p>
это ребенок или прямой потомк, внешней<div>
. Отказ Это означает, что он не сразу содержится каким-либо другим элементом, чем<div>
. Отказ Иерархия так же просто, как описано селектор, и как таковое выбраноdiv > p
.Не выбран
Этот
<p>
найден в<blockquote>
элемент и<blockquote>
Элемент найден в самой внешне<div>
. Отказ Иерархия таким образом выглядит так:div > blockquote > p
Поскольку абзац непосредственно содержится блокировкой, это нет выбран
div > p
. Отказ Однако это могу соответствоватьblockquote > p
(Другими словами, это ребенок<blockquote>
).Выбранный
Этот параграф живет во внутреннем
<div>
, который содержится на внешнем<div>
. Отказ Иерархия выглядела так:div > div > p
Неважно, если бы больше
<div>
вложенный внутри друг друга или даже если<div>
s содержатся другими элементами. Пока этот параграф напрямую содержится его собственным<div>
, он будет выбранdiv > p
.