为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

PIPIONE 2019-10-25 15:29:56
我不能告诉之间的区别element:first-child和element:first-of-type例如说,您有一个divdiv:first-child→ <div>作为其父级的第一个孩子的所有元素。div:first-of-type→所有<div>元素都是<div>其父元素的第一个元素。这似乎完全一样,但是它们的工作方式不同。有人可以解释一下吗?
查看完整描述

3 回答

?
森栏

TA贡献1810条经验 获得超5个赞

父元素可以具有一个或多个子元素:


<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中由其标记名表示,即使该元素不是parent的第一个子元素也是如此。到目前为止,我们正在查看的子元素全部为divs,但是请耐心等待,我将稍作介绍。


就目前而言,反过来也成立:任何事情: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之间的区别:第n个孩子(2)和p:第n-的式(2)?


查看完整回答
反对 回复 2019-10-25
?
拉莫斯之舞

TA贡献1820条经验 获得超10个赞

我终于明白了 如果我想要div元素下的第一个div,我会称它为div:first-of-type,因为它上面可能有非div元素。这有点令人困惑,但我现在明白了。这是一篇非常出色且非常有用的文章。感谢您的帮助,我们将不胜感激。

查看完整回答
反对 回复 2019-10-25
  • 3 回答
  • 0 关注
  • 1079 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信