如果我想为 div 内的所有 p 元素添加样式，为什么要使用
div > p{
*style here*
}
而不仅仅是
div p{
*style here*
}
另外，如果我想使用伪类，为什么我会选择使用“>”
div > p:first-child{
*style here*
}
而不是
div p:first-child{
*style here*
}
有什么好处或坏处吗？ 那个操作员是做什么的？
【问题讨论】：
它是直接子代，而不是递归匹配。
CSS
div > p {
}
HTML
<div>
<p>Match</p>
<span>
<p>No match</p>
</span>
</div>
CSS
div p {
}
标记
<div>
<p>Match</p>
<span>
<p>Match</p>
</span>
</div>
【讨论】：
p 包裹在span 中。浏览器可能会做一些意想不到的事情。
> 和 （空格）是关系选择器，分别表示“孩子”和“后代”。除了其他人指出的语义差异之外，还有一个子选择器 computes faster as it avoids redundant DOM tree traversal on non-matching elements。
【讨论】：
因为它意味着直接的孩子。
您的第二个示例将匹配本示例中的 p
<div>
<header>
<p>
</p>
</header>
</div>
【讨论】：