区别：第一和：第一个孩子不清楚
我有一个ul li列表
- Parent
- child1
- child2
我试图使用选择器jQuery('ul li:first')和jQuery('ul li:first-child')两者都给出了相同的结果，这让我对两者之间的区别感到困惑，这是一个澄清的例子两个选择器之间的区别
来自官方文件：
：第一个伪类相当于：eq（0）。 它也可以写成：lt（1）。 虽然这只匹配一个元素，但是：first-child可以匹配多个：每个父元素一个。
while :first只匹配一个元素， :first-child选择器可以匹配多个：每个父元素一个。 这相当于:nth-child(1) 。
http://api.jquery.com/first-selector/
更新：
以下是使用的示例:first-child ：
您可以查看其摘要并自行编辑。 如果你将:first-child替换为:first ，它只会突出显示那里的第一个单词。 这是为他们定义的。
以下是使用的示例:first ：
有时，但并非总是如此，结果是（并且应该）是相同的。
给出你的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
从你的例子：
$('ul li'); // Returns all 3 li's // Parent ... // child1 // child2 $('ul li:first'); // Returns the first li of all matching li's from above // Parent ...
假设我们有来自第一个选择器$("ul li")所有三个结果，那么:first-child将过滤掉该列表中不是其父元素的第一个子元素的任何元素。 在这种情况下，
会被过滤掉，因为它是
的第二个孩子。
$('ul li:first-child'); // Returns all li's that are the first child of any ul // Parent .. // child1
此外，对于第一个子选择器，元素必须是DOM中的第一个子元素，而不是jQuery结果集中的元素。 例如，使用给定的结构：
First
Second Third
由于不是div的第一个子节点，因此下面的查询将产生0结果。
$("div span:first-child")
理解first-child一个好方法是将它想象为过滤掉当前结果集中任何元素的filter，如果它不是其父元素的第一个子元素。
这是$("prev next:first")和$("prev next:first-child")实际选择的例证：
... // <- both `:first` & `:first-child` ... ... ... // <- only `:first-child` (NOT `:first`) ... ...
:first仅返回第一个结果，而:first-child返回每个父项的一个结果（如果有）。
当我们使用时:first它选择第一个指定元素的第一个子元素，当我们使用:first-child它选择指定元素的所有第一个子元素。
$(document).ready(function(){ $("#btnfirst").click(function(){ $("ul li:first").hide(); }); $("#btnfirstChild").click(function(){ $("ul li:first-child").hide(); }); });
List 1:
- Book
- pen
- pencil
List 2:
- Book
- pen
- pencil