CSS Kind vs Deszendent Selektoren

Question

Ich bin ein bisschen verwirrt zwischen diesen 2 Selektoren.

Hat das Nachkommen Selektor:

div p 

Alle wählen p innerhalb einer div, ob oder nicht, es ist eine sofortige descedent? Also, wenn die ist in einem anderen div wird es immer noch ausgewählt?

Dann wird das Kind Selektor:

div > p 

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

<div><p> 

vs

<div><div><p> 

werden beide ausgewählt werden, oder nicht?

Answer 1

Man denke nur an, was die Worte „Kind“ und „Abkömmling“ bedeutet auf Englisch:

• Meine Tochter beide mein Kind und mein Nachkomme
• Meine Enkelin ist nicht mein Kind, aber sie ist meine Nachkomme.

Answer 2

Ja, Sie haben Recht. div p entspricht dem folgenden Beispiel, aber div > p nicht.

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

Die erste ist descendant selector genannt, und die zweite ist child selector genannt.

Answer 3

Seien Sie sich bewusst, dass das Kind Wähler nicht in Internet Explorer unterstützt wird 6. (Wenn Sie den Selektor in einem jQuery/Prototype/YUI etc Wähler eher als in einem Stylesheet verwenden, noch es funktioniert aber)

Answer 4

Bascailly "ab" wählt alle bs innerhalb ein, während "a> b" wählt bs was sind nur Kinder zum einem, wird es nicht b wählen, was Kind von b Was ist ein Kind von ein.

Dieses Beispiel verdeutlicht den Unterschied:

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

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

Hintergrundfarbe von abc und def wird grün sein, aber ghi rot Hintergrundfarbe haben.

WICHTIG: Wenn Sie Reihenfolge der Regeln ändern:

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

Alle Briefe werden roten Hintergrund hat, weil Nachkommen Wähler zu Kindern auswählt.

Answer 5

div p

Wählt alle ‚p‘ Elemente, bei denen die Eltern ist ein ‚div‘ -Element

div > p

Es bedeutet sofortige Kinder Wählt alle ‚p‘ Elemente, bei denen die Eltern ist ein ‚div‘ -Element

Answer 6

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

Deszendent => jedes Element, das von einem bestimmten Vorfahren abstammt (z. Joe und sein Ur-Ur-Grossvater)

In der Praxis: versuchen, diese HTML:

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

Answer 7

CSS Auswahl und Das Anwenden eines Stils auf ein bestimmtes Element kann durch das dom-Element erfolgen [Beispiel

Example

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