Разница между h1 em и h1> em

Question

В чем разница между этими двумя операторами CSS:

h1 em { color:#ddd; }

и

h1 > em { color:#ddd; }

Насколько я могу судить, они делают одно и то же (хотя согласно тому, что я прочитал на W3C в первом случае, em считается «потомком», а во втором - «потомком», хотя я понятия не имею, как это на самом деле отличается). Может кто-нибудь объяснить, как они отличаются и почему вы решили использовать один синтаксис над другим. Я всегда просто использовал первый метод, но время от времени я сталкиваюсь со вторым стилем в коде других людей.

Answer 1

Вот этот:

h1 em { color:#ddd; }

соответствует любому em в пределах h1, будь то ребенок, внук, правнук и т. Д. Например:

<h1><strong><em>This matches</em></strong></h1>

Вот этот:

h1 > em { color:#ddd; }

соответствует только em, который является потомком h1, а не внуком, правнуком и т. Д. Итак:

<h1><strong><em>This doesn't match</em></strong></h1>
<h1><em>But this does</em></h1>

Answer 2

Вероятно, не самый лучший пример, который вы привели, но я буду работать с ним:

<h1>Stuff here    
  <em>Something
    <p>More stuff</p>
    <p>Something <em>here</em></p>
  </em>
<h1>

h1 em будет соответствовать обоим в моем примере.

h1> em будет соответствовать только em, который является прямым потомком h1, а не вторым внутренним em.

Answer 3

Дочерний селектор в этом символе> позволяет выбирать только те теги em, которые являются прямыми потомками тега h1.

Пример - самый простой способ объяснить это:

<h1>H1 Tag <em id="first">child selector<em id="second">not a direct child descendant</em></em> </h1>

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

Вы можете увидеть спецификацию доктрины здесь: http://www.w3.org/TR/CSS2/conform.html#doctree

Answer 4

Кстати, по-прежнему существует много проблем совместимости браузеров с использованием>, и это тот случай, когда перед развертыванием я бы использовал jQuery или хотя бы протестировал во всех ваших целевых браузерах.

Answer 5

Потомок - это любой элемент, который появляется под содержащим элементом в любой точке дерева DOM (дочерний тип, отношение типа grand-child). Дочерний элемент - это элемент, который находится непосредственно под содержащим элементом в DOM.

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

Answer 6

h1 em { color:#ddd; }

означает: «их внутри h1»

h1 > em { color:#ddd; }

означает: «их с родителем h1»