jQuery中两个选择器之间的区别

Question

在jQuery中有一个名为的选择器first-child.它从匹配的元素中选择第一个子元素.但是,first-child如果我使用first-of-type它,它也可以正常工作.所以我只是想知道,有什么区别？

$(function(){
   //$('li :first-child').text('some text');
   $('li :first-of-type').text('some text');
});

Answer 1

只需阅读文档(:first-of-type和:first-child):

:first-child
选择作为其父级的第一个子级的所有元素.

:first-of-type
选择同一元素名称中兄弟姐妹中的第一个元素.

所述:first-of-type选择器将一个给定的名称(例如第一个元素匹配span,a其中包括兄弟节点集等).您的示例将匹配:

<li>
    <span>Matches this span</span>    <!-- First span amongst siblings -->
    <a>Matches this a</span>          <!-- First a amongst siblings -->
    <a>Doesn't match this one</span>  <!-- Second a amongst siblings -->
</li>

该:first-child选择会简单的比赛父母的第一个孩子:

<li>
    <span>Matches this span</span>    <!-- First child of parent -->
    <a>Doesn't match this</span>      <!-- Second child of parent -->
    <a>Nor this</span>                <!-- Third child of parent -->
</li>