css选择器语法："element1 element2“与"element1 > element2”

Question

选择者策略1和策略2有什么不同？在我看来是一样的

1. div (选择<p> <div>元素中的所有元素)
2. div >p(选择所有<p>元素，其中父元素是<div>元素)

Answer 1

选择器#1 (div p)选择作为div后代的所有段落。可以在div结构中深入嵌套p元素，并选择它们。

选择器#2 (div > p)只选择一个div的子段(即直系后代)。

第一个被称为后代组合器选择器。

第二个是一个组合子选择器。

https://www.w3.org/TR/css3-selectors/#selectors

Answer 2

使用>只选择直接子元素，下面只选择span，它是div的直接子元素。

​

div span {
  color: red
}
div > span {
  color: lime
}

<div>
  <span>Span</span>
  <span>Span</span>
  <span>Span</span>
  <span>
    Span
    <span>Span</span>
    <span>Span</span>
  </span>
</div>

​