html - 为什么在 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

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