:first和:first-child之间的区别不清楚 [英] difference between :first and :first-child not clear

问题描述

我有一份清单

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

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

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

and i am trying to use a selector jQuery('ul li:first') and jQuery('ul li:first-child') both giving the same result this makes me confused about the difference between the two is there a example which clarifies the difference between two selectors

推荐答案

摘自官方文档:

:first伪类是等效的 到:eq(0).也可以写成 :lt(1).虽然这只匹配一个 单个元素，:第一个孩子可以 匹配多个:每个匹配一个 父母.

The :first pseudo-class is equivalent to :eq(0). It could also be written as :lt(1). While this matches only a single element, :first-child can match more than one: One for each parent.

虽然:first仅匹配一个元素，但:first-child选择器可以匹配多个元素:每个父元素一个.这等效于:nth-child(1).

While :first matches only a single element, the :first-child selector can match more than one: one for each parent. This is equivalent to :nth-child(1).

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

更新:

以下是使用:first-child的示例:

http://jsbin.com/olugu

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

You can view its soruce and edit yourself. If you replace :first-child with :first, it will only highlight the first word there. This is what is defined for them.

这是使用:first的示例:

http://jsbin.com/olugu/2

这篇关于:first和:first-child之间的区别不清楚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！