CSS Child vs Descendant selectors

Я немного запутался между этими двумя селекторами.

Селектор потомков:

div p

выбрать все p пределах div независимо от того, является ли он немедленным descedent? Итак, если p находится внутри другого div он все равно будет выбран?

Затем дочерний селектор:

div > p

Какая разница? Ребенок означает немедленного ребенка? Например.

<div><p>

против

<div><div><p>

оба будут выбраны или нет?

Ответы

Ответ 1

Подумайте, что означают слова "ребенок" и "потомок" на английском языке:

  • Моя дочь и мой ребенок, и мой потомок
  • Моя внучка не является моим ребенком, но она является моим потомком.

Ответ 3

Bascailly, "a" выбирает все b внутри a, в то время как "a > b" выбирает b, что только дети для a, он не будет выбирать b, что является дочерним элементом b, что является дочерним элементом.

Этот пример иллюстрирует разницу:

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}

Все буквы будут иметь красный фон, потому что селектор потомков также выбирает дочерний элемент.

Ответ 4

Помните, что селектор дочерних элементов не поддерживается в Internet Explorer 6. (Если вы используете селектор в селекторе jQuery/Prototype/YUI etc, а не в таблице стилей, он все равно работает)

Ответ 5

В теории: ребенок => непосредственный потомок предка (например, Джо и его отец)

Descendant => любой элемент, который произошел от определенного предка (например, Джо и его прапрадед)

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

Ответ 6

div p

Выбирает все элементы 'p', где родитель является элементом 'div'

div > p

Это означает, что дети Выбирает все элементы "p", где родительский элемент "div"

Ответ 7

Выбор 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>