Являются ли «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 

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

Ребенок-селектор isn't supported by IE6.

Answer 2

Pekka объяснил это теоретически в his answer. Основываясь на его ответе, и my answer to another question about the > combinator, я приведу иллюстрацию, измененную для решения этого вопроса.

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

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

2. Не выбран

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

   div > blockquote > p 
   

   В этом пункте непосредственно содержится на BLOCKQUOTE, это не выбран div > p. Тем не менее, это может соответствует blockquote > p (другими словами, это ребенок <blockquote>).

3. Выбранный

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

   div > div > p 
   

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