## css选择器中:first-child 与 :first-of-type的区别

----

:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码:

<div>
<p>第一个子元素</p>
<h1>第二个子元素</h1>
<span>第三个子元素</span>
<span>第四个子元素<spanp>
</div>

p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素;

h1:first-child  匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个;

span:first-child  匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素;

---

然后,在css3中又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?还是看那段代码:

<div>
<p>第一个子元素</p>
<h1>第二个子元素</h1>
<span>第三个子元素</span>
<span>第四个子元素<spanp>
</div>

p:first-of-type  匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个;

h1:first-of-type  匹配到的是h1元素,因为h1是div的所有类型为h1的子元素中的第一个;

span:first-of-type  匹配到的是第三个子元素span。这里div有两个为span的子元素,匹配到的是它们中的第一个。

---

所以,通过以上两个例子可以得出结论:

:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。

同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。

---

选中div下的非第一个子元素

div:not(:first-child)

相关链接

CSS伪类选择器:before、:after使用:插入字符、插入图片、插入项目编号

css选择器中:first-child 与 :first-of-type的区别的更多相关文章

  1. 【轻松前端之旅】​CSS选择器中的空格与尖括号有何区别?

    CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...

  2. CSS选择器中的特殊性

    我们来看一下一个简单的例子: <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  3. CSS选择器中带点(.)怎么办?

    在SharePoint中很多元素的ID都用点(.)来连接的,比如: <li class="ms-cui-group" id="Ribbon.Documents.Ed ...

  4. css 选择器中的正则表达式

    正则表达式在任何语言中都有使用,只是使用的形式不一样而已 css也是一门语言,也有自己的正则表达式 正则表达式中的一些通用规则: 1 ^ 表示字符串开始位置匹配 2 $表示字符串结束为止匹配 3 *表 ...

  5. css选择器中:first-child与:first-of-type的区别

    :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素: ...

  6. [转] css选择器中:first-child与:first-of-type的区别

    :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素: ...

  7. css类选择器中 空格 逗号 啥都不填的区别及其他笔记

    .a.b 代表 一个元素上 同时 有 a 类 和 b 类 .a .b (中间有空格) 代表 .b 是 .a 的子元素选择. .a,.b 代表 class='a' 和 class='b' 都会被选择上.

  8. CSS选择器笔记,element element和element > element 的区别

    看官方解释 element element  例子: div p 官方解释:div内部所有的p元素 就是说 只要p在div内部.如果 p在span内部,span在div内部,p也算在div内部 < ...

  9. css 样式中 margin padding和top类定位的区别

    1 margin margin 是外边距的意思,是边框到外部另一元素之间的距离,允许使用负值 语法结构: margin:5px auto;                  意思上下为5,左右平均居中 ...

随机推荐

  1. Spring中的依赖查找和依赖注入

    作者:Grey 原文地址: 语雀 博客园 依赖查找 Spring IoC 依赖查找分为以下几种方式 根据 Bean 名称查找 实时查找 延迟查找 根据 Bean 类型查找 单个 Bean 对象 集合 ...

  2. LeetCode-二叉搜索树的第k大节点

    二叉搜索树的第k大节点 LeetCode-面试题54 需要充分了解二叉搜索树的性质. 利用中序遍历的思想,采用相反的思想:先遍历右节点再遍历左节点. /** * 给定一棵二叉搜索树,请找出其中第k大的 ...

  3. java校招笔试题

    基础: Java 反射?反射有什么缺点?你是怎么理解反射的(为什么框架需要反射)? 谈谈对 Java 注解的理解,解决了什么问题? 内部类了解吗?匿名内部类了解吗? BIO和NIO区别,4核cpu,1 ...

  4. NoSQL安装与操作

    redis操作: redis的启动与关闭:注意:(需要关闭防火墙) redis的启动:redis-server redis.conf redis的登录:redis-cli -a pass redis的 ...

  5. vue-cli脚手架安装及注意事项

    1.下载nodejs 链接:https://nodejs.org/en/直接下载电脑对应的版本即可. 13.5网上说不大稳定(一个表示①推荐用户版本,②最新版本) 2.安装nodejs 建议在D或者E ...

  6. 「视频小课堂」Logstash如何成为镇得住场面的数据管道(文字版)

    视频地址 B站视频地址:Logstash如何成为镇得住场面的数据管道 公众号视频地址:Logstash如何成为镇得住场面的数据管道 知乎视频地址:Logstash如何成为镇得住场面的数据管道 内容 首 ...

  7. TextRank算法及生产文本摘要方法介绍

    TextRank 算法是一种用于文本的基于图的排序算法,其基本思想来源于谷歌的 PageRank算法,通过把文本分割成若干组成单元(句子),构建节点连接图,用句子之间的相似度作为边的权重,通过循环迭代 ...

  8. python-链队列的实现

    7 class Node(object): 8 def __init__(self,data): 9 self.data = data 10 self.next = None 11 12 class ...

  9. python 实现输出一个等腰三角形

    这个问题实际上是一个数学问题,我们主要找出每行的规律就可以根据规律来书写代码 """ 2 代码实现输出一个等腰三角形,实际上就是一个等差数列求各项的一个数学> 问题 ...

  10. 如何在 ASP.Net Web Forms 中使用依赖注入

    依赖注入技术就是将一个对象注入到一个需要它的对象中,同时它也是控制反转的一种实现,显而易见,这样可以实现对象之间的解耦并且更方便测试和维护,依赖注入的原则早已经指出了,应用程序的高层模块不依赖于低层模 ...