css 中 first-of-type 与 first-child 的区别

更新日期: 2019-09-21 阅读次数: 3899 字数: 86 分类: CSS

举个直观的例子:

<div class="main">
  <h1>Languages</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Javascript</div>   <!-- div:nth-child(2), div:first-of-type -->
  <div>Golang</div>
  <div>PHP</div>
</div>
  • first-child 是指父节点下的第一个元素,无论类型是什么
  • first-of-type 不一定是父节点下的第一个元素,但是是第一个指定类型的元素

例如:

<div>Javascript</div>

是 div:first-of-type,但是不是 div:first-child.

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式