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

299

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

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

div p

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

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

div > p

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

<div><p>

против

<div><div><p>

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

css css-selectors iceangel89
источник
Я попытался объяснить здесь подробно, могу сослаться только на случай, если это кому-нибудь пригодится ...
Mr. Alien

Ответы:

469

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

  • Моя дочь - и мой ребенок, и мой потомок
  • Моя внучка не мой ребенок, но она мой потомок.
RichieHindle
источник
49
Одним из важных замечаний является то, что дочерний селектор будет работать быстрее, чем дочерний селектор, что может оказать видимое влияние на страницы с тысячами элементов DOM.
Джейк Уилсон,
Хороший ответ, но я бы просто добавил прямые ответы на его примеры в этом вопросе - просто чтобы сделать это до смешного ясным.
JoeCool
23

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

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

Ignas2526
источник
Раздел «Важно», который вы добавили, завершает этот ответ. Спасибо!
Аакаш Верма
10

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

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/

Snowcrash
источник
Интересно, на каком браузере вы его тестировали, так как он, кажется, действительно работает
yoel halb
3
К вашему сведению, CSS в ответе не совпадает с CSS в JSFiddle ( redи blueпоменялся местами).
Пан
7

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

rlovtang
источник
Я думаю, что я использую это в CSS. но в jquery я определяю, является ли браузер ie6 (в jquery я могу это сделать? или мне нужно использовать <! - [если IE 6]>) и добавляю класс
iceangel89
2
JQuery делает функцию сниффинг, а не браузер нюхает, поэтому я не думаю, что вы можете определить, является ли браузер ie6. И ты не должен. Лучше всего включить дополнительную таблицу стилей для ie6 с условными комментариями, как вы описали.
rlovtang
4 
div p

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

div> p

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

user3351229
источник
-1

Выбор 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>
Аравинд Чиккаллур
источник