jQuery选择器“祖先后代”和“父项>子项”之间的区别

关于 $("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>

$("div ul.posts") 将选择与条件匹配的所有子体。一切都是这样 ul.posts 将被选中,无论它们的嵌套级别是什么,只要沿着链的某个位置,它们都在一个范围内 div

第一个仅选择其父节点为div的ul.posts。

第二个方案还将选择:

<div>
    <blockquote>
        <ul class="posts"></ul>
    </blockquote>
</div>

哦所以“祖先-后代”指的是父项下的所有指定元素,不管嵌套有多深

而“父-子”仅指第一个指定的元素,即使它再次出现在父元素下的其他位置

我只是在这里添加一个熟悉的参考。我意识到这是在最初的问题之后的几年,但它出现在谷歌的第一页上,也许这会帮助其他人。

想想现实世界中的祖先和父母。父母和孩子总是相隔一代,但祖先和他们的后代可能相隔数百年。这个 >