:first chlid和:first-of-type的区别

E:first-child选中的是作为其父元素第一个子元素的元素E
E:first-of-type选中的是作为其父元素中第一个出现的元素E，可以不是其父元素的第一个子元素。
也就是说:first-child表示第一个子元素，:first-of-type表示第一个该类型的元素。
例1：

title
title

代码demo
例2：
图片标题
图片标题

.item1:first-chil表示选中使用item1选择器的第一个子元素，“aa”属于第一个子元素被选中；.item1:first-of-type表示选中item1下每一个第一次出现的元素，“aa”是第一个p，“bb”是第一个h3，都被选中。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 伪类选择器之E:first-child系列和E:first-of-type系列
    刚开始学习选择器，一开始对伪类选择器确实有点懵。昨天晚上自己动手写了写，终于是慢慢搞懂了。下面对一些容易误解的一些...
    婷楼沐熙阅读 2,531评论 4赞 7
  • CSS选择器
    1.class 和 id 的使用场景? 两者都能选取DOM节点并给DOM节点添加样式，但是W3C标准里规定页面中只...
    饥人谷_米弥轮阅读 443评论 0赞 1
  • 7 CSS选择器
    class 和 id 的使用场景? class写专门的class通用和私有模块命名，id具有唯一性且优先级太高，用...
    好好顽阅读 435评论 0赞 0
  • CSS选择器
    1.class 和 id 的使用场景? class：类选择器，一个标签可以有多个类且同一个类可以用到不同的标签上，...
    饥人谷_兔子君阅读 1,221评论 0赞 0
  • CSS选择器
    基本选择器 *{} 通配符选择器，适用任何元素h1 标签选择器，选择h1标签内元素....
    字母31阅读 664评论 0赞 0