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

<div>
<p>第一个子元素</p>
<h1>第二个子元素</h1>
<span>第三个子元素</span>
<span>第四个子元素</span>
</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有什么区别呢?还是看那段代码:

<div>
<p>第一个子元素</p>
<h1>第二个子元素</h1>
<span>第三个子元素</span>
<span>第四个子元素</span>
</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个;

												

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. Android--Fragment嵌套的问题

    项目中遇到Fragment嵌套应用的问题 子Fragment中要用getChildFragmentManager()方法获取FragmentManager,否则会出问题!

  2. Java基础IO类之File类

    大三了,目前基础太差了,重新学习过!代码如下,里面都有详细的解释每一行代码代表的意思~ package IODemo; import java.io.File; import java.io.File ...

  3. 在uboot里面添加环境变量使用run来执行

    在uboot里面添加环境变量使用run来执行 本文链接:https://blog.csdn.net/u010979030/article/details/41038259 Author:杨正  Dat ...

  4. mouseover mouseleave

    mouseover在当鼠标移入元素或其子元素的时候都会触发,是一个重复触发,冒泡的过程.见下面例子,一个父元素包含一个子元素,在其父元素内滑动鼠标,超出子元素的范围时,也会触发事件. 而mouseen ...

  5. 将double转化成string,并保持N位小数

    double dumpSize = (1024000000.1415926535897932384 * 1.0) / 1024 / 1024; string tempStr = to_string(d ...

  6. [JZOJ5281]钦点题解--瞎搞+链表

    [JZOJ5281]钦点题解--瞎搞+链表 题目链接 于 暴 力 过

  7. 免root xshell连接termux

    免root实现xshell连接termux termux为安卓手机上的一款模拟linux终端的应用,由于手机上打字比较麻烦,所以想到了用电脑上的xshell通过ssh连接termux,以实现电脑控制t ...

  8. vue -- 数组过滤 filter (vue 表格)

    如下图:  左边表格滑动滚轮,可以自动赋值右边表格:   现在是后台只有一个接口,把整个页面的数据全部返回出来了, 左边表格滑动到每一项时显示右边表格内容,但是需要code相同:   问题: 右边表格 ...

  9. FreeRTOS config开始的宏

    FreeRTOSConfig.h系统配置文件中可以自定义,FreeRTOS.h中定义默认值 configAPPLICATION_ALLOCATED_HEAP 默认情况下FreeRTOS的堆内存是由编译 ...

  10. USB原理简单叙述

    USB简介: USB的几种版本: 1. USB 1.0:速度 1.5Mb/s 2. USB 1.1:速度 12Mb/s 3. USB 2.0:速度 60MbB/s 4. USB 3.0:速度 640M ...