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

Question

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

Имеет ли потомок селектор:

div p

выбрать все p в пределах div или нет, это непосредственный потомок? Так что если p внутри другого div он все равно будет выбран?

Тогда дочерний селектор:

div > p

Какая разница? Ребенок означает непосредственный ребенок? Например.

<div><p>

против

<div><div><p>

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

Answer 1

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

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

Answer 2

Да вы правы. div p будет соответствовать следующему примеру, но div > p не буду.

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

Первый называется селектором потомков, а второй - дочерним селектором.

Answer 3

По сути, "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}

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

Answer 4

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

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

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

Answer 5

div p 

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

div > p

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

Answer 6

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

Answer 7

Разница между всеми селекторами по визуальному дереву DOM:

Answer 8

div > p совпадения pу которых есть div родитель - <div><p> в вашем вопросе

div p совпадения pу которых есть div предок (родитель, дедушка, прадед и т. д.) - <div><p> а также <div><div><p> в вашем вопросе

Answer 9

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