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 个，因为最后 2 个结束标签被“误读”)都是同级标签。

所以，它被解读为:

<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> 的直接子代。 (或者浏览器是这么认为的)。

演示:http://jsfiddle.net/wP7uD/

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

这个寓意:你不能拥有 <p>标签为 <p> 的子级标签。

<小时/>

W3C 规范 <p>标签:http://www.w3.org/TR/html-markup/p.html