jquery选择器混淆 - $（'div p'）vs $（'div＆gt; 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>代码的子代。

---

<p>代码的W3C规范：http://www.w3.org/TR/html-markup/p.html

Answer 2

div p

匹配p 中的所有div元素，无论它们有多深。

div > p

匹配 p的直接子女的所有div元素

你的情况有什么不对的是HTML。 不允许p嵌套在另一个p内;浏览器在渲染新的浏览器之前自动关闭第一个p。

Answer 3

所有<p>都是第一个<p>元素的子元素。

Answer 4

div > p表示p的第一级div子级。并且div p暗示p

后代div的{​​{1}}个孩子

更多documentation here

Answer 5

• $("div>p")被称为 Child Selector (“parent > child”)

    

  选择由“parent”指定的元素“child”指定的所有直接子元素。

• $("div p")被称为 Descendant Selector (“ancestor descendant”)

    

  选择作为给定祖先后代的所有元素。