jquery - 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>