区别:第一和:第一个孩子不清楚

Question

我有一个ul li列表

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

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

我试图使用一个选择器jQuery('ul li:first'),jQuery('ul li:first-child')两者给出相同的结果,这让我对这两者之间的差异感到困惑,是否有一个例子澄清了两个选择器之间的区别

Answer 1

来自官方文件:

:第一个伪类相当于: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

Answer 2

有时,但并非总是如此,结果是(并且应该)是相同的.

给出你的HTML:

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

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

所以,你可以看到,第一行只返回第一个li元素.

第二行是返回两个父li元素的元素first-child.

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

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

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

如果您只想要第一个匹配的第一个匹配项,您实际上可以组合两个选择器.

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

Answer 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>被过滤掉,因为它是a的第二个孩子<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将其视为过滤掉当前结果集中的任何元素的过滤器,如果它不是其父元素的第一个子元素.