这些选择器之间有什么区别？

Question

我找到了两个选择器

div p

和

div>p

这两个css选择器之间的确切区别是什么？

Answer 1

• 第一个是"后代"选择器:p内部任何地方div

div p {
  color: red;
}

<div>
  Div
  <p>Child</p>
  <aside>
    <p>Grandchild</p>
  </aside>
</div>

• 第二个是"孩子"选择器:p直接在div

div > p {
  color: red;
}

<div>
  Div
  <p>Child</p>
  <aside>
    <p>Grandchild</p>
  </aside>
</div>