CSS Child vs Descendant Selektoren

298

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?

iceangel89
quelle
Ich habe versucht, hier im Detail zu erklären , kann nur für den Fall verweisen, wenn es für jemanden hilfreich ist ...
Mr. Alien

Antworten:

468

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.
RichieHindle
quelle
49
Ein wichtiger Hinweis ist, dass ein untergeordneter Selektor schneller ist als ein untergeordneter Selektor, was sich auf Seiten mit Tausenden von DOM-Elementen sichtbar auswirken kann.
Jake Wilson
Gute Antwort, aber ich würde einfach auch direkte Antworten auf seine Beispiele in der Frage hinzufügen - nur um es lächerlich klar zu machen.
JoeCool
23

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.

Ignas2526
quelle
Der von Ihnen hinzugefügte Abschnitt "Wichtig" vervollständigt diese Antwort. Vielen Dank!
Aakash Verma
10

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/

Snowcrash
quelle
Interessant, auf welchem ​​Browser Sie es getestet haben, da es tatsächlich zu funktionieren scheint
yoel halb
3
Zu Ihrer Information, CSS als Antwort stimmt nicht mit CSS in JSFiddle überein ( redund wurde blueausgetauscht).
Pang
7

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

rlovtang
quelle
Ich denke, ich benutze das in CSS. aber in jquery erkenne ich, ob der Browser ie6 ist (in jquery kann ich das tun? oder muss ich <! - [wenn IE 6]> verwenden) und füge eine Klasse hinzu
iceangel89
2
jquery bietet eher Sniffing als Browser-Sniffing, daher glaube ich nicht, dass Sie erkennen können, ob der Browser ie6 ist. Und das solltest du nicht. Am besten fügen Sie ein zusätzliches Stylesheet für ie6 mit bedingten Kommentaren hinzu, wie Sie es beschrieben haben.
Rlovtang
4
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

user3351229
quelle
-1

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>
Aravind Cheekkallur
quelle