:first 和 :first-child 之间的区别不清楚答案

【问题标题】：difference between :first and :first-child not clear:first 和 :first-child 之间的区别不清楚
【发布时间】：2010-05-31 22:11:17
【问题描述】：

我有一个 ul li 列表

<ul>
<li>Parent
    <ul>
       <li>
          child1
       </li>
       <li>
          child2  
       </li>

    </ul>
</li>
</ul>

我正在尝试使用选择器 jQuery('ul li:first') 和 jQuery('ul li:first-child') 都给出相同的结果，这让我对两者之间的区别感到困惑是否有一个示例可以阐明两个选择器之间的区别

【问题讨论】：

我敢打赌它不会给你同样的结果。
是的，你可能会写我在这里肯定做错了什么:-)
如果您执行jQuery('ul li:first-child').html() 之类的操作，它可能会给出相同的结果，它只会显示 first 匹配项的 HTML，即使有两个匹配项。
这个问题没什么用，因为你可以在:first和:first-child API规范的第一句话中找到答案。

标签： jquery jquery-selectors

【解决方案1】：

来自官方文档：

:first 伪类是等价的到：eq（0）。也可以写成 :lt(1)。虽然这仅匹配单个元素， :first-child 可以匹配多个：每个一个父母。

虽然:first 只匹配一个元素，但:first-child 选择器可以匹配多个：每个父元素一个。这相当于:nth-child(1)。

http://api.jquery.com/first-selector/

更新：

这里是一个使用:first-child的例子：

http://jsbin.com/olugu

您可以查看其来源并自行编辑。如果将:first-child 替换为:first，它只会突出显示那里的第一个单词。这是为他们定义的。

这是使用:first的示例：

http://jsbin.com/olugu/2

【讨论】：

感谢 sarfraj，您能否修改我的示例，其中 first-child 将产生与 :first 不同的结果。很抱歉没有正确遵循您提到的内容

【解决方案2】：

有时，但并非总是如此，结果是（并且应该）是相同的。

鉴于您的 HTML：

jQuery('ul li:first').length; // Returns 1

jQuery('ul li:first-child').length; // Returns 2

因此，您可以看到，第一行仅返回第一个 li 元素。

第二行返回两个 li 元素，它们是其父级的 first-child。

:first 返回匹配集中的第一个。

:first-child 返回作为其父元素的第一个子元素的元素。

HTML 中的第一个 li 元素也是第一个子元素，尽管在测试 length 属性时使用 :first-child 会产生更多结果。

如果您只希望第一个匹配项是第一个子项，则实际上可以组合这两个选择器。

jQuery('ul li:first-child:first').length; // Returns one

【讨论】：

【解决方案3】：

从你的例子：

$('ul li'); // Returns all 3 li's
// <li> Parent ... </li>
// <li> child1 </li>
// <li> child2 </li>

$('ul li:first'); // Returns the first li of all matching li's from above
// <li> Parent ... </li>

假设我们有来自第一个选择器$("ul li") 的所有三个结果，那么:first-child 将过滤掉该列表中不是其父级的第一个子级的任何元素。在这种情况下，<li> child2 </li> 被过滤掉，因为它是 <ul> 的第二个孩子。

$('ul li:first-child'); // Returns all li's that are the first child of any ul
// <li> Parent .. </li>
// <li> child1 </li>

另外，对于第一个子元素选择器，元素必须是 DOM 中的第一个子元素，而不是 jQuery 结果集中的第一个子元素。例如，对于给定的结构：

<div>
    <h1>First</h1>
    <span>Second</span>
    <span>Third</span>
</div>

下面的查询将产生 0 个结果，因为 <span> 不是 div 的第一个孩子。

$("div span:first-child")

理解first-child 的一个好方法是将其视为一个过滤器，如果它不是其父元素的第一个子元素，它将过滤掉当前结果集中的任何元素。

【讨论】：

+1 以获得精彩的解释；特别是 div span 示例，这使概念非常清晰，非常感谢您抽出宝贵时间

【解决方案4】：

这是$("prev next:first") 和$("prev next:first-child") 实际选择的示例：

<prev>
    <next>...</next> // <- both `:first` & `:first-child`
    <next>...</next>
    <next>...</next>
</prev>
<prev>
    <next>...</next> // <- only `:first-child` (NOT `:first`)
    <next>...</next>
    <next>...</next>
</prev>

:first 仅返回第一个结果，而:first-child 为每个父级返回一个结果（如果有）。

【讨论】：

【解决方案5】：

当我们使用:first时，它选择第一个指定元素的第一个子元素，当我们使用:first-child时，它选择指定元素的所有第一个子元素。

$(document).ready(function(){
    $("#btnfirst").click(function(){
        $("ul li:first").hide();
    });
    $("#btnfirstChild").click(function(){
        $("ul li:first-child").hide();
    });
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>

<p>List 1:</p>
<ul>
  <li>Book</li>
  <li>pen</li>
  <li>pencil</li>
</ul>

<p>List 2:</p>
<ul>
   <li>Book</li>
   <li>pen</li>
   <li>pencil</li>
</ul>

<button Id="btnfirst">:first</button>
<button Id="btnfirstChild">:first-child</button>
</body>
</html>

【讨论】：