Являются ли "div> p" и "div p" одинаковыми?

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

Для кода типа:

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

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

div > p {
     something
}

И другие:

div p {
     something
}

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

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

Спасибо!

Ответы

Ответ 1

Простой:

 div > p

влияет только на прямых детей.

 div p

затрагивает внуков, внуков и т.д. (Не будет иметь значения в вашем примере)

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

Ответ 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> выбираются с помощью селекторов?

Во-первых, все они соответствуют div p, потому что они являются <p> элементами, расположенными где-нибудь внутри элемента <div>.

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

Какие <p> выбраны div > p?

  • Selected

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

  • Не выбрано

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

    div > blockquote > p

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

  • Selected

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

    div > div > p

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