Селекторы CSS,> против пространства

Ответ 1

A > B будет выбирать только B, которые являются прямыми дочерними элементами A (т.е. между ними нет других элементов).

A B выберет любые B, которые находятся внутри A, даже если между ними есть другие элементы.

Ответ 2

> является дочерним селектором. В нем указаны только непосредственные дочерние элементы, а не потомок (включая внуков, правнуков и т.д.).), как во втором примере без >.

Селектор дочерних элементов не поддерживается IE 6 и ниже. Большая таблица совместимости здесь.

Ответ 3

div.card > div.name соответствует <div class='card'>....<div class='name'>xxx</div>...</div> но он не соответствует <div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name соответствует обоим.

То есть селектор > гарантирует, что выбранный элемент с правой стороны из > является дочерним элементом элемента с левой стороны.

Синтаксис без > соответствует любому <div class='name'>, который является потомком (а не только дочерним) <div class='card'>.