Ist „div> p“ & „div p“ gleich?

Question

Hallo, ich eine offensichtliche Frage haben.

Code wie:

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

Einige Leute benutzen Wähler wie:

div > p {
     something
}

Und andere:

div p {
     something
}

Was ist der Unterschied in diesem Fall? Meiner Meinung nach - keine

Und übrigens, ist nicht der Nachkomme Element immer ein Kind ?! Was ist der Unterschied zwischen den beiden? Ich lese w3.org kann es aber nicht bekommen:)

Danke!

Answer 1

Ganz einfach:

 div > p

wirkt sich nur auf direkte Kinder.

 div p

wirkt Enkel, Urenkel usw. auch. (Wird nicht einen Unterschied in Ihrem Beispiel machen)

Das Kind Selektor wird nicht von IE6 unterstützt.

Answer 2

Pekka hat es in der Theorie erklärt in seine Antwort . Auf der Grundlage seiner Antwort, und > combinator href="https://stackoverflow.com/questions/3225891/what-does-means-in-css-rules/3225905#3225905"> , ich werde eine Illustration zur Verfügung stellen, veränderte diese Frage zu untersuchen.

Betrachten Sie den folgenden Block von HTML, und Ihr Beispiel CSS-Selektoren. Ich verwende eine aufwändigere Beispiel, damit ich Ihnen den Unterschied zwischen den beiden Ihrer Wähler zeigen können:

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

Welche <p>s durch welche Selektoren ausgewählt?

Zunächst einmal, alle von ihnen entsprechen div p , weil sie <p> Elemente gelegen überall innerhalb ein <div> Element.

Das macht div > p spezifischere, die die nächste Frage aufwirft:

Welche <p>s ausgewählt werden durch div > p?

1. Ausgewählte

   Dieser Absatz <p> ist ein Kind, oder ein direkter Nachkomme, der äußersten <div>. Das heißt sofort, es ist nicht von einem anderen Element als ein <div> enthalten. Die Hierarchie ist so einfach wie der Selektor beschreibt, und als solche ist es durch div > p ausgewählt.

2. Nicht ausgewählt

   Dieses <p> in einem <blockquote> Elemente gefunden, und das <blockquote> Element in der äußersten <div> gefunden. Die Hierarchie würde dies so aussehen:

   div > blockquote > p
   

   Wie der Absatz wird direkt durch eine Blockquote enthält, es ist nicht von div > p ausgewählt. Aber es können Spiel blockquote > p (in anderen Worten, es ist ein Kind des <blockquote>).

3. Ausgewählte

   Dieser Absatz lebt in dem inneren <div>, die von dem äußeren <div> enthalten ist. Die Hierarchie würde wie folgt aussehen:

   div > div > p
   

   Es spielt keine Rolle, wenn es mehr <div>s sind ineinander verschachtelt, oder auch wenn die <div>s durch andere Elemente enthalten sind. Solange dieser Absatz direkt durch ihre eigene <div> enthalten ist, wird es von div > p ausgewählt werden.