CSS Child vs Descendant Selektoren

Ich bin ein bisschen verwirrt zwischen diesen beiden Selektoren.

Hat der absteigende Selektor:

div p

Wählen Sie alle pinnerhalb eines, divob es sich um einen unmittelbaren Nachkommen handelt oder nicht. Wenn sich das palso in einem anderen befindet div, wird es trotzdem ausgewählt?

Dann das Kind Selektor:

div > p

Was ist der Unterschied? Bedeutet ein Kind ein unmittelbares Kind? Z.B.

<div><p>

vs.

<div><div><p>

werden beide ausgewählt oder nicht?

Denken Sie nur daran, was die Wörter "Kind" und "Nachkomme" auf Englisch bedeuten:

• Meine Tochter ist sowohl mein Kind als auch mein Nachkomme
• Meine Enkelin ist nicht mein Kind, aber sie ist mein Nachkomme.

Ja du hast Recht. div pentspricht dem folgenden Beispiel, wird aber div > pnicht.

<div><table><tr><td><p> <!...

Der erste wird als Nachkommenselektor und der zweite als untergeordneter Selektor bezeichnet .

Grundsätzlich wählt " ab " alle b in a aus, während " a> b " b auswählt , was nur Kinder für a sind , und nicht b, was Kind von b ist, was Kind von a ist .

Dieses Beispiel zeigt den Unterschied:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

Die Hintergrundfarbe von abc und def ist grün, aber ghi hat eine rote Hintergrundfarbe.

WICHTIG: Wenn Sie die Reihenfolge der Regeln ändern in:

div>span{background:green}
div span{background:red}

Alle Buchstaben haben einen roten Hintergrund, da die Nachkommenauswahl auch die des Kindes auswählt.

Theoretisch: Kind => ein unmittelbarer Nachkomme eines Vorfahren (zB Joe und sein Vater)

Nachkomme => jedes Element, das von einem bestimmten Vorfahren abstammt (z. B. Joe und sein Ur-Ur-Großvater)

In der Praxis: Probieren Sie diesen HTML-Code aus:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

mit diesem CSS:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

Beachten Sie, dass der untergeordnete Selektor in Internet Explorer 6 nicht unterstützt wird. (Wenn Sie den Selektor in einem jQuery / Prototype / YUI usw.-Selektor anstelle eines Stylesheets verwenden, funktioniert er dennoch.)

div p 

Wählt alle 'p'-Elemente aus, bei denen das übergeordnete Element ein' div'-Element ist

div> p

Dies bedeutet, dass unmittelbar untergeordnete Elemente alle 'p'-Elemente auswählen, bei denen das übergeordnete Element ein' div'-Element ist

Die CSS-Auswahl und das Anwenden des Stils auf ein bestimmtes Element kann durch Durchlaufen des dom-Elements erfolgen [Beispiel

Beispiel

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>