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

  1. <div>
  2. <p>第一个子元素</p>
  3. <h1>第二个子元素</h1>
  4. <span>第三个子元素</span>
  5. <span>第四个子元素</span>
  6. </div>

  

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

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

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

:first-child  匹配到的是p元素,因为在这里div的第一个子元素就是p。

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

  1. <div>
  2. <p>第一个子元素</p>
  3. <h1>第二个子元素</h1>
  4. <span>第三个子元素</span>
  5. <span>第四个子元素</span>
  6. </div>

p:first-of-type  匹配到的是p元素,因为p是div的所有为p的子元素中的第一个,事实上这里也只有一个为p的子元素;

h1:first-of-type  匹配到的是h1元素,因为h1是div的所有为h1的子元素中的第一个,事实上这里也只有一个为h1的子元素;

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

:first-of-type  匹配到的是p元素

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

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

:first-of-type 匹配的是该类型的第一个,类型是指什么呢,就是冒号前面匹配到的东西,比如 p:first-of-type,就是指所有p元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是属于同一级的,也就是同辈的。

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

最后说明一点nth不是什么简写,而是n+th;意思就是第n个;

  1.  

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

  1. css选择器,有箭头与没箭头的区别

    div > span 和 div span 的区别 ,即有箭头和没箭头的区别 div > span span 是 div 的下一层级关系 在这种情况下找得到span元素: <div& ...

  2. css选择器学习(一)

    1.通用选择器“*”和元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. CSS选择器小结

    在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的. 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得 ...

  4. html学习第二天—— 第八章—— CSS选择器

    标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...

  5. 总结30个CSS选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  6. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  7. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  8. 30个最常用css选择器解析(zz)

    你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...

  9. CSS选择器及其优先级

    一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

  10. HTML+CSS学习笔记(8)- CSS选择器

    标签:HTML+CSS 什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是"选择器","选择器"指 ...

随机推荐

  1. Springboot入门及配置文件介绍(内置属性、自定义属性、属性封装类)

    目的: 1.Springboot入门 SpringBoot是什么? 使用Idea配置SpringBoo使用t项目 测试案例 2.Springboot配置文件介绍 内置属性 自定义属性 属性封装类 Sp ...

  2. react实现设置答题器选项个数

    一,设置答题器选项import React, { useState, useEffect } from 'react' import PropTypes from 'prop-types' impor ...

  3. linux查看系统未被挂载的磁盘空间的方法

    原文URL:https://www.cnblogs.com/lemon-flm/p/7597403.html 解决AWS 挂载.解决挂载完重启就消失等问题 linux上的盘和window的有区别,磁盘 ...

  4. 【SoloPi】SoloPi使用2-功能使用,录制回放

    Soloπ是什么Soloπ是一个无线化.非侵入式的Android自动化工具,公测版拥有录制回放.性能测试.一机多控三项主要功能,能为测试开发人员节省宝贵时间. 录制回放功能在Soloπ的录制模式对应用 ...

  5. 用 Scoop 管理你的 Windows 软件

    包管理系统,Homebrew 就是 macOS 上体验最佳的软件包管理,能帮助我们方便快捷.干净利落的管理软件.在Windows平台上也有一个非常棒的包管理软件--Scoop.Scoop 最适合安装那 ...

  6. 使用VS2012编译和使用C++ STL(STLport)

    使用VS2012编译和使用C++ STL(STLport) http://cstriker1407.info/blog/use-vs2012-to-compile-and-use-the-c-stl- ...

  7. ReLU函数的缺陷

    ReLU激活功能并不完美. 它有一个被称为 “ReLU 死区” 的问题:在训练过程中,一些神经元会“死亡”,即它们停止输出 0 以外的任何东西.在某些情况下,你可能会发现你网络的一半神经元已经死亡,特 ...

  8. 基于【 springBoot+jsoup】一 || 爬取全国行政区划数据

    一.代码演示 如果中途中断,可进行刷选过滤已拉取省份数据 /** * TODO * * @author kevin * @createTime 2019-11-18 19:37 */ @RestCon ...

  9. Java程序员的自我修养

    一.自我修养路线图 如图,这是笔者所走的路.且不论这路走的对不对,这个过程中行业环境会影响到你,大可不必钻牛角尖.附上这张图的目的是为了说,如果你想成为一个优秀的程序员,那么你一定要有规划.当然,别想 ...

  10. vue动态请求到的多重数组循环遍历,取值问题,如果某个值存在则显示,不存在则不显示。

    数据结构: 需求:我在vue页面需要拿到url值并显示图片 代码写法: 注意:一定要判断否则拿到的large对象一直是空值, 那么img.large.url将会取不到值,会报 url  'undefi ...