为什么要在 CSS 中使用">"？

Question

如果我想为div 内的所有 p 元素添加样式，为什么要使用

div > p{
  *style here*
}

而不是只是

div p{
  *style here*
}

此外，如果我想使用伪类，为什么我会选择使用">"

div > p:first-child{
  *style here*
}

而不是

 div p:first-child{
   *style here*
 }

有什么优点或缺点吗？该操作员是做什么的？

Answer 1

它是直接子项，而不是递归匹配。

.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>

Answer 2

因为它意味着直接的孩子。

您的第二个示例将与此示例中的p匹配

<div>
  <header>
    <p>
    </p>
  </header>
</div>

Answer 3

>和（空格）是关系选择器，分别表示"子"和"后代"。除了其他人指出的语义差异之外，子选择器的计算速度更快，因为它避免了对不匹配元素的冗余 DOM 树遍历。