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

Question

我找到了两个选择器

div p

和

div>p

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

Answer 1

• 第一个是"后代"选择器：pdiv

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>

Answer 2

div p此样式将选择div下的所有p元素，无论p是否在另一个div内。div>p只会选择在div 下的 p.如果同一个div 中还有另一个div 也具有 p 元素，它不会选择该 p。