CSS Child vs Descendant selectors

Bu 2 seçici arasında biraz kafam karıştı.

Does soyundan seçici:

div p

tümünü seç pBir dahilinde divderhal bir descedent olsun veya olmasın? Öyleyse, eğer pdiğerinin içindeyse div, hala seçilecek mi?

Sonra çocuk seçici:

div > p

Fark ne? Çocuk derhal çocuk mu demek ? Örneğin.

<div><p>

vs

<div><div><p>

her ikisi de seçilecek mi seçilmeyecek mi?

İngilizce'de "child" ve "descendant" kelimelerinin ne anlama geldiğini düşünün:

• Kızım hem çocuğum hem de torunum
• Torunum benim çocuğum değil, o benim torunum.

Evet haklısın. div paşağıdaki örnekle eşleşecek, ancak eşleşmeyecek div > p.

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

Birincisine soy seçici , ikincisine çocuk seçici denir .

Bascailly, " ab " ise "seçer tüm b en bir iç, bir> b " seçer yılların b sadece çocuklar ne a , o seçmek olmaz b çocuğu ne b çocuğu ne bir .

Bu örnek farkı göstermektedir:

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

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

Arka plan rengi abc ve def yeşil olacak, ama ghi kırmızı arka plan rengi olacaktır.

ÖNEMLİ: Kuralların sırasını şu şekilde değiştirirseniz:

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

Tüm harfler kırmızı arka plana sahip olacaktır, çünkü alt seçici çocuğun da seçimini yapar.

Teorik olarak: Çocuk => bir atadan derhal torun (ör. Joe ve babası)

Descendant => belirli bir atadan gelen herhangi bir unsur (örneğin Joe ve büyük-büyük-büyük babası)

Uygulamada: Bu HTML'yi deneyin:

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

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

bu CSS ile:

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

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

Alt seçicinin Internet Explorer 6'da desteklenmediğini unutmayın. (Seçiciyi bir stil sayfasından ziyade bir jQuery / Prototype / YUI vb seçicide kullanıyorsanız yine de çalışır)

div p 

Üst öğenin 'div' öğesi olduğu tüm 'p' öğelerini seçer

div> p

Anında çocuklar anlamına gelir Ebeveynin bir 'div' öğesi olduğu tüm 'p' öğelerini seçer

CSS seçimi ve belirli bir öğeye stil uygulama dom öğesinden geçilerek yapılabilir [Örnek

Misal

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