Является ли `div> a` тем же, что и` div a`?

Question

В CSS, селекторы div > a и div a одинаковы?

<div>
  <a>Hi</a>
</div>

Answer 1

Это не так. «div > a» является дочерним селектором ; это означает «элемент a, который является непосредственным потомком из div». «div a» - это селектор потомков ; это означает «элемент a, который является потомком из div» (ребенок, или ребенок от ребенка, или ребенок от ребенка от ребенка, ...). Все дочерние элементы, конечно, являются потомками; но не все потомки - дети.

Так, например:

<div>
  <a href='http://www.google.com'>Google</a>
</div>

соответствует обоим div > a и div a (a является дочерним элементом div, и, конечно, все дочерние элементы также являются элементами-потомками).

Но:

<div>
  <span>
    <a href='http://www.google.com'>Google</a>
  </span>
</div>

... не соответствует div > a, но соответствует div a, потому что a является потомком, но не непосредственным потомком (между ними span).

Живой пример

Answer 2

Это не так.

<div><h1><a>some text</a></h1></div>

В приведенном выше HTML-коде div > a не выберет <a>, поскольку он не является прямым потомком <div>.

Answer 3

Они не одинаковы.

Answer 4

Нет, они не одинаковы. Первый выбирает только a элементы, которые дочерние из div элементов, а второй выбирает все a элементы, которые потомки из div элементов, например, <div><p><a>...</a></p></div>.