Czy "div> p" i "div p" są takie same?

Question

Hej, mam oczywiste pytanie.

Dla kodu, takich jak:

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

niektórzy ludzie używają selektora takiego:

div > p { 
    something 
} 

i inne:

div p { 
    something 
} 

Jaka jest różnica w tym przypadku? Moim zdaniem - żaden?

A przy okazji, czy potomek nie jest zawsze dzieckiem ?! Jaka jest różnica między tymi dwoma? Czytam w3.org, ale nie mogę tego uzyskać :)

Dziękujemy!

Answer 1

Proste:

div > p 

dotyczy tylko bezpośrednie dzieci.

div p 

wpływa wnuki, grandgrandchildren itp również. (Nie ma znaczenia w twoim przykładzie)

Wybieracz dla dzieci isn't supported by IE6.

Answer 2

Pekka wyjaśnił to w teorii w his answer. Na podstawie jego odpowiedzi i my answer to another question about the > combinator, przedstawię ilustrację, zmodyfikowaną, by odpowiedzieć na to pytanie.

Rozważ następujący blok HTML i przykładowe selektory CSS. używam bardziej skomplikowany przykład więc mogę pokazać różnicę między obu swoich selektorów:

<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> 

Które <p> s wybierane są przez które selektorów?

pierwsze, wszystkie z nich pasuje div p ponieważ są <p> elementy znajdujące się w dowolnym miejscuelement <div>.

To sprawia div > p bardziej szczegółowe, które nasuwa się następne pytanie:

Które <p> s wybierane są przez div > p?

1. Wybrane

   Niniejszy ustęp <p> jest dzieckiem, lub bezpośrednim potomkiem, od zewnętrznej <div>. Oznacza to, że nie jest natychmiast zawarty w żadnym innym elemencie niż <div>. Hierarchia jest tak prosta, jak opisuje selektor i jako taka jest wybierana przez div > p.

2. Nie wybrano

   Ten <p> znajduje się w elemencie <blockquote> i element <blockquote> znajduje się w najdalszym <div>. Hierarchia będzie więc wyglądać następująco:

   div > blockquote > p 
   

   Jak akapit jest bezpośrednio zawarty wewnątrz cytatów, to nie wybrany przez div > p. Jednak może on może dopasować blockquote > p (innymi słowy, jest dzieckiem <blockquote>).

3. Wybrane

   Niniejszy ustęp mieszka w wewnętrznej <div>, który jest zawarty przez zewnętrzną <div>. Hierarchia będzie wyglądać następująco:

   div > div > p 
   

   To nie ma znaczenia, jeśli istnieje więcej <div> s zagnieżdżone wewnątrz siebie, a nawet jeśli <div> s zawarte są przez inne elementy. Dopóki ten akapit jest bezpośrednio zawarty w jego własnym <div>, zostanie wybrany przez div > p.