CSS ребенок против потомков селекторов

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

тут descendent селектор:

div p

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

тут ребенок селектор:

div > p

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

<div><p>

vs

<div><div><p>

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

271
css css-selectors

7 ответов

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

  • моя дочь и мой ребенок, и мой потомок
418

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

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

первая называется селектор а второй называется ребенок селектор.

44

Bascailly, "a b "выбирает все b внутри a, в то время как"a>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}

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

21

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

8

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

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/

7
div p

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

div > p

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

2

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