jquery - jQuery 选择器 "ancestor descendant"和 "parent > child"之间的区别

Question

以下两种形式的 jQuery 选择器似乎做同样的事情:

• $("div > ul.posts")
• $("div ul.posts")

即选择“div”元素下“posts”类的所有“ul”元素。

有什么不同吗？

Answer 1

关于 $("div > ul.posts")，仅选择 DIV 的直接后代。

<div>
    <ul class="posts"> <!--SELECTED-->
        <li>List Item</li>
        <ul class="posts"> <!--NOT SELECTED-->
            <li>Sub list item</li>
        </ul>
    </ul>

    <fieldset>
        <ul class="posts"> <!--NOT SELECTED-->
            <li>List item</li>
        </ul>
    </fieldset>

    <ul class="posts"> <!--SELECTED-->
        <li>List item</li>
    </ul>
</div>

while $("div ul.posts") 将选择所有符合条件的后代。因此，所有 ul.posts 都将被选择，无论它们的嵌套级别有多长，只要沿着链的某个位置，它们就位于 div 内。