«DIV> P» & «Div P» же?

Question

Эй, у меня очевидный вопрос.

Для кода как:

<div>
     <p>We want to format this text :)</p>
</div>

Некоторые люди используют селектор, как:

div > p {
     something
}

И другие:

div p {
     something
}

В чем разница в этом случае? На мой взгляд - никто?

И кстати, не пункт потомка всегда ребенок?! В чем разница между ними? Я читаю w3.org, но не могу получить это :)

Спасибо!

Answer 1

Простой:

 div > p

Затрагивает только прямые дети.

 div p

Захватывает внуки, Грансграничники и т. Д. также. (Не будет иметь значение в вашем примере)

Селектор ребенка не поддерживается IE6.

Answer 2

Пекка объяснила это теоретически в его ответ. Отказ На основе его ответа, а также мой ответ на другой вопрос о > комбинатор, Я предоставлю иллюстрацию, модифицированную для решения этого вопроса.

Рассмотрим следующий блок 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?

1. Выбранный

   Этот параграф <p> это ребенок или прямой потомк, внешней <div>. Отказ Это означает, что он не сразу содержится каким-либо другим элементом, чем <div>. Отказ Иерархия так же просто, как описано селектор, и как таковое выбрано div > p.

2. Не выбран

   Этот <p> найден в <blockquote> элемент и <blockquote> Элемент найден в самой внешне <div>. Отказ Иерархия таким образом выглядит так:

   div > blockquote > p
   

   Поскольку абзац непосредственно содержится блокировкой, это нет выбран div > p. Отказ Однако это могу соответствовать blockquote > p (Другими словами, это ребенок <blockquote>).

3. Выбранный

   Этот параграф живет во внутреннем <div>, который содержится на внешнем <div>. Отказ Иерархия выглядела так:

   div > div > p
   

   Неважно, если бы больше <div>вложенный внутри друг друга или даже если <div>s содержатся другими элементами. Пока этот параграф напрямую содержится его собственным <div>, он будет выбран div > p.