Css （p span）和（p>；span）之间的区别是什么？

我非常困惑，我想知道由于

p>span

和

p span

中的每一个都使用不当，代码是如何受到损害的。我指的是与

span

p span

相关的选择器不

p

将针对发生在p元素内部的任何跨度，无论其嵌套程度如何

p>span

将只针对p元素的直接后代

例如

这将与第一个匹配，但与第二个不匹配

这两者都会匹配

p span
表示
span
元素中的任何位置。在下面的示例中，这将是
span1
、
span2
和
span3

p>span
表示
span
元素的直接子元素。在本例中，它是
span1
和
span3
，但不是
span2

如果您有以下元素：

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



解释很好，但示例有点缺陷-如果使用给定的示例进行测试，那么两个选择器将只匹配
#span1
，因为
div
过早地终止
p
。当然，您可以通过使用其他一些内联元素（如
strong
）轻松解决这个问题。
<p>
  <span id="span1"></span>
  <div><span id="span2"></span></div>
  <span id="span3"></span>
</p>