jQuery选择器混淆-$（'div p'）vs $（'div> p'）

Question

我正在尝试学习jquery并有一个问题-

页面上的div元素看起来像-

<div id ="1">
    <p id="first"> one 
        <p id="second"> one.one 
            <p id="third"> one.one.one </p>
        </p>
    </p>
</div>

以下两个选择器都给我相同的结果-

  $('div p').css({'background-color' : 'blue'}); 

  $('div>p').css({'background-color' : 'blue'});

第二个选择器不应该只返回元素的第一个<p>标签<div>吗？

Answer 1

$('div p')选择作为的后代的所有 <p>标签<div>。

$('div>p') 仅选择<p>是的直接子代的标签<div>。

代码中发生的事情是，因为结束</p>标记是可选的，所以浏览器将HTML读为具有3个<p>（实际上是5个，因为最后两个关闭标记是“误读”）所有同级标记。

因此，它被读为：

<div id ="1">
    <p id="first"> one</p> 
    <p id="second"> one.one</p>
    <p id="third"> one.one.one</p>
    <p></p>
    <p></p>
</div>

这就是为什么它们都变成蓝色的原因。 $('div>p')与它们全部匹配，因为它们都是的直接子对象<div>（或这就是浏览器的想法）。

_{打开浏览器的开发工具并检查DOM，您将看到有5个<p>标签。}

道德观念：您不能将<p>标签作为标签的子<p>元素。

jQuery选择器混淆-$（'div p'）vs $（'div&gt; p'）