为什么要使用“＆gt;”在CSS？

Question

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

div > p{

  *style here*

}

而不是

div p{

  *style here*

}

此外，如果我想使用伪类，为什么我会选择使用“＆gt;”

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

>和（空格）关系选择器分别表示“child”和“descendant”。除了其他人指出的语义差异之外，还有一个子选择器computes faster as it avoids redundant DOM tree traversal on non-matching elements。