Question

我有一个名单

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

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

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

Answer 1

来自官方文档：

：第一个伪类是等价的 to：eq（0）。它也可以写成：LT（1）。虽然这只匹配一个单个元素，：第一个孩子可以匹配多个：每个一个父节点。

虽然: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返回作为其父元素的第一个子元素的元素。

HTML中的第一个li元素也是第一个子元素，但在测试: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>会被过滤掉，因为它是<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的好方法是将其视为过滤掉当前结果集中任何元素的过滤器，如果它不是其父元素的第一个子元素。

Answer 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每个父级返回一个结果（如果有）。

Answer 5

当我们使用<head runat="server"> <title></title> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #428bca; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: inherit; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <form id="form1" runat="server"> <ul> <li class="dropdown"><a href="#" class="dropbtn">MY ARTICLES</a> <div class="dropdown-content"> <a href="#">Aapnu Surat</a> <a href="#">ચોકલેટી અભિનેતા વિનોદ મેહરા</a> <a href="#"> ઋષિસમાન સંગીતકાર સચિનદેવ બર્મન</a> </div> </li> <li class="dropdown"><a href="#" class="dropbtn">MY PRESENTATIONS</a> <div class="dropdown-content"> <a href="#">Safaltani Sargam Part I</a> <a href="#">Safaltani Sargam Part II</a> <a href="#">The Art Of Illusion</a> <a href="#">100 Years Of Indian Cinema - Part I Silent Film Era</a> </div> </li> <li class="dropdown"><a href="#" class="dropbtn">DRAMA</a> <div class="dropdown-content"> <a href="#">Result Of SMC Drama Contest</a> <a href="#">RESULTS OF 39th SMC DRAMA CONTEST</a> <a href="#">The Result Of SMC Drama Contest 2012</a> <a href="#">An Enemy Of The People</a> </div> </div> </li> <li class="dropdown"><a href="#" class="dropbtn">GUJARAT</a> <div class="dropdown-content"> <a href="#">Link 1વી ધ પીપલ ઓફ ગુજરાત</a> </li> <li class="dropdown"><a href="#" class="dropbtn">INDIAN CULTURE</a> <div class="dropdown-content"> <a href="#">The Vedic Culture - Guj</a> </div> </li> </ul> </form> </body> </html> Select all Open in new window this is for static <style> /* ul */ .submenu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #428bca; } .submenu li { float: left; } .submenu li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 12px 36px; text-decoration: none; } .submenu li a:hover, .dropdown:hover .dropbtn { background-color: inherit; } .submenu li.dropdown { display: inline-block; } .submenu .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .submenu .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .submenu .dropdown-content a:hover { background-color: #f1f1f1; } .submenu .dropdown:hover .submenu .dropdown-content { display: block; } </style> <div class="Container"> <ul class="submenu" id="topicmenu" runat="server"> </ul> </div> private void fillMenu() { clsTopic objTopic = new clsTopic(true); objTopic.SelectAll(); string str = string.Empty; int i = 0; for (i = 0; i < objTopic.ListclsTopic.Count; i++) { str +=@"<li class='dropdown'><a href='#' class='dropbtn' style='text-transform:uppercase;'>"+ objTopic.ListclsTopic[i].TopicName+@"</a></li>"; } topicmenu.InnerHtml = str; }时，它选择第一个指定元素的第一个子元素，当我们使用:first时，它选择指定元素的所有第一个子元素。

:first-child

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

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

5 个答案: