Селектори CSS Child vs Descendant

Я трохи заплутався між цими двома селекторами.

Є чи нащадок селектор:

div p

вибрати все pв межах, divчи це негайний спад? Тож якщо pвсередині іншого divце все одно буде обрано?

Тоді дочірній селектор:

div > p

Яка різниця? Чи означає дитину негайну дитину? Напр.

<div><p>

проти

<div><div><p>

обидва будуть обрані, чи ні?

Подумайте, що означають слова "дитина" та "нащадок" англійською мовою:

• Моя донька є і моєю дитиною, і моїм нащадком
• Моя внучка не моя дитина, але вона - мій нащадок.

Так, ви праві. div pбуде відповідати наступному прикладу, але div > pне буде.

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

Перший називається селекторним набором, а другий називається дочірнім селектором .

Баскейлі, " ab " вибирає все b всередині a, тоді як " a> b " вибирає b, що є лише дітьми до a , воно не вибирає b, що є дитиною b, що є дитиною a .

Цей приклад ілюструє різницю:

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

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

Колір фону abc та def буде зеленим, але ghi матиме червоний колір тла.

ВАЖЛИВО: Якщо ви зміните порядок правил на:

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

Усі літери матимуть червоний фон, тому що селекціонер вибирає і дитину.

Теоретично: дитина => безпосередній нащадок предка (наприклад, Джо та його батько)

Нащадок => будь-який елемент, що походить від конкретного предка (наприклад, Джо та його правнук)

На практиці: спробуйте цей 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>

з цим CSS:

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

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

Майте на увазі, що дочірній селектор не підтримується в Internet Explorer 6. (Якщо ви використовуєте селектор у селекторі jQuery / Prototype / YUI тощо, а не в таблиці стилів, він все ще працює)

div p 

Вибирає всі елементи 'p', де батьків є елементом 'div'

div> p

Це означає, що діти безпосередньо вибирають усі елементи 'p', де батьків є елементом 'div'

Вибір CSS та застосування стилю до певного елемента можна здійснити шляхом проходження елемента dom [Приклад

Приклад

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