css选择器语法：“element1 element2”VS“element1＆gt; element2”

Question

选择器策略1和2有什么区别？对我来说似乎是一样的

1. div p（选择margin-bottom: -140px;＆gt;元素中的所有<p＆gt;元素）
2. div＆gt; p（选择父级为<div＆gt;元素的所有<p＆gt;元素）

Answer 1

使用>仅选择直接子项的元素，仅在下面的案例中span，它是div的直接子项

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

选择器＃1（div p）选择所有作为div后代的段落。 p元素可以深深嵌套在div结构中，并且它们将被选中。

Selector＃2（div > p）仅选择div的子节点（即直接后代）。

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

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

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