2 题: 有什么区别:first-child和:first-of-type?

在...创建的问题 Wed, Dec 30, 2015 12:00 AM

我不知道element:first-childelement:first-of-type之间的区别

比如说,你有一个div

div:first-child
→所有<div>个元素是他们父母的第一个孩子。

div:first-of-type
→所有<div>个元素是其父级的第一个<div>元素。

这看起来完全相同,但它们的工作方式不同。

有人可以解释一下吗?

    
93
  1. 第一个孩子只针对父母的第一个孩子,其中第一个孩子的目标是该类型的第一个孩子(div或span或者你正在尝试的任何东西)目标)
    2014-07-09 15:24:34Z
  2. 醇>
    2个答案                              2 跨度>                         

    父元素可以包含一个或多个子元素:

     
    <div class="parent">
      <div>Child</div>
      <div>Child</div>
      <div>Child</div>
      <div>Child</div>
    </div>
    

    在这些孩子中,只有一个孩子可以成为第一个孩子。这与:first-child匹配:

     
    <div class="parent">
      <div>Child</div> <!-- :first-child -->
      <div>Child</div>
      <div>Child</div>
      <div>Child</div>
    </div>
    

    :first-child:first-of-type之间的区别在于:first-of-type将匹配其元素类型的第一个元素,在HTML中,它的标记名称为,即使该元素不是父元素的第一个子元素。到目前为止,我们所看到的儿童元素都是div秒,但请耐心等待,我会稍微谈谈它。

    目前,反过来也是如此:任何:first-child也必须是:first-of-type。由于这里的第一个孩子也是第一个div,它将匹配两个伪类,以及类型选择器div

     
    <div class="parent">
      <div>Child</div> <!-- div:first-child, div:first-of-type -->
      <div>Child</div>
      <div>Child</div>
      <div>Child</div>
    </div>
    

    现在,如果你将第一个孩子的类型从div改为其他东西,比如h1,它仍然是第一个孩子,但它显然不再是第一个div;相反,它成为第一个(也是唯一的)h1。如果同一父项中的第一个子项后面还有其他div个元素,则这些div元素中的第一个将匹配div:first-of-type。在给定的示例中,第二个孩子在第一个孩子改为div后成为第一个h1

     
    <div class="parent">
      <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
      <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
      <div>Child</div>
      <div>Child</div>
    </div>
    

    请注意,:first-child相当于:nth-child(1)

    这也意味着虽然任何元素一次只能有一个匹配:first-child的子元素,但是它可以并且将拥有与:first-of-type伪类匹配的子元素数与它具有的子类型数量一样多。在我们的示例中,选择器.parent > :first-of-type(具有限定*伪的隐式:first-of-type)将匹配两个元素,而不仅仅是一个:

     
    <div class="parent">
      <h1>Child</h1>   <!-- .parent > :first-of-type -->
      <div>Child</div> <!-- .parent > :first-of-type -->
      <div>Child</div>
      <div>Child</div>
    </div>
    

    同样适用于:last-child:last-of-type:任何:last-child必然也是:last-of-type,因为在其父级内绝对没有其他元素跟随它。然而,因为最后一个div也是最后一个孩子,h1不可能是最后一个孩子,尽管它是最后一个孩子。

    当与任意整数参数一起使用时,:nth-child():nth-of-type()原理上的功能非常相似(如上面提到的:nth-child(1)示例中所示),但它们的区别在于与:nth-of-type()匹配的元素的潜在数量。 详细介绍了这一点在p:nth-​​child(2)和p:nth-​​of-type(2)之间?     
    166
    2018-10-03 02:34:59Z
    1. 我终于明白了。如果我想在div元素下面的第一个div,我会调用div:first-of-type,因为它上面可能有非div元素。这有点令人困惑,但我现在明白了。这是一篇优秀且内容丰富的文章。谢谢,非常感谢您的帮助。
      2014-07-09 15:33:38Z
    2. 我根据这个答案创建了一个样本: codepen.io/bigtinabang/pen/pmMPxO
      2019-06-08 09:47:22Z
    3. 醇>

    我已经创建了一个示例来演示first-childfirst-of-type之间的区别。

    HTML

     
    <div class="parent">
      <p>Child</p>
      <div>Child</div>
      <div>Child</div>
      <div>Child</div>
    </div> 
    

    CSS

     
    .parent :first-child {
      color: red;
    }
    
    .parent :first-of-type {
      background: yellow;
    }
    
    .parent p:first-child {
      text-decoration: line-through;
    }
    
    // Does not work
    .parent div:first-child {
      font-size: 20px;
    }
    // Use this instead
    .parent div:first-of-type {
      text-decoration: underline;
    }
    // This is second child regardless of its type
    .parent div:nth-child(2) {
      border: 1px black solid;
    }
    

    要查看完整示例,请访问 https://jsfiddle.net/bwLvyf3k/1/

        
    13
    2016-08-09 21:13:30Z
来源放置 这里