Селекторы 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

45

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

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

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

— Чагдаш Текин
источник

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>

— Аравинд Чиккаллур
источник