css - (p span) 和 (p > span) 有什么区别？

Question

我很困惑，我想知道代码是如何受到损害的，因为这两个p > span和p span. 我指的是不p相关的选择器span。

Answer 1

p span将针对碰巧在 p 元素内的任何跨度，无论嵌套如何。

p > span将仅针对作为 p 元素的直接后代的跨度。

例如。

<p><div><span>this will match the first but not the second</span></div></p>

<p><span>this will match both</span></p>

Answer 2

p span表示在元素SPAN内部的任何地方。P在下面的示例中，这将是span1、span2和span3。

p > span表示 a是元素SPAN的直接子P元素。在示例中，它是span1and span3，但不是span2。

如果你有这些元素：

<p>
  <span id="span1"></span>
  <div><span id="span2"></span></div>
  <span id="span3"></span>
</p>