Ich bin ein bisschen verwirrt zwischen diesen beiden Selektoren.
Hat der absteigende Selektor:
div p
Wählen Sie alle p
innerhalb eines, div
ob es sich um einen unmittelbaren Nachkommen handelt oder nicht. Wenn sich das p
also 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?
css
css-selectors
iceangel89
quelle
quelle
Antworten:
Denken Sie nur daran, was die Wörter "Kind" und "Nachkomme" auf Englisch bedeuten:
quelle
Ja du hast Recht.
div p
entspricht dem folgenden Beispiel, wird aberdiv > p
nicht.Der erste wird als Nachkommenselektor und der zweite als untergeordneter Selektor bezeichnet .
quelle
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:
Die Hintergrundfarbe von abc und def ist grün, aber ghi hat eine rote Hintergrundfarbe.
WICHTIG: Wenn Sie die Reihenfolge der Regeln ändern in:
Alle Buchstaben haben einen roten Hintergrund, da die Nachkommenauswahl auch die des Kindes auswählt.
quelle
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:
mit diesem CSS:
http://jsfiddle.net/X343c/1/
quelle
red
und wurdeblue
ausgetauscht).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.)
quelle
Wählt alle 'p'-Elemente aus, bei denen das übergeordnete Element ein' div'-Element ist
Dies bedeutet, dass unmittelbar untergeordnete Elemente alle 'p'-Elemente auswählen, bei denen das übergeordnete Element ein' div'-Element ist
quelle
Die CSS-Auswahl und das Anwenden des Stils auf ein bestimmtes Element kann durch Durchlaufen des dom-Elements erfolgen [Beispiel
Beispiel
quelle