"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

Simple:

 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> элементы, расположенные где-нибудь в пределах a <div> элемента.

Это делает div > p более конкретным, напрашивается следующий вопрос:

Какие <p> s выбраны с помощью div > p?

1. Выбранный

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

2. Не выбрано

   This <p>находится в элементе <blockquote>, а элемент <blockquote> находится во внешнем <div>.Таким образом, иерархия будет выглядеть следующим образом:

   div > blockquote > p
   

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

3. Выбранный

   Этот абзац живет во внутреннем <div>, который содержится во внешнем <div>.Иерархия будет выглядеть следующим образом:

   div > div > p
   

   Не имеет значения, если в друг друга вложено больше <div> или даже если <div> содержатся в других элементах.Пока этот абзац непосредственно содержится в его собственном <div>, он будет выбран div > p.