css选择器:first-child与:first-of-type的区别
: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的区别的更多相关文章
- css选择器,有箭头与没箭头的区别
div > span 和 div span 的区别 ,即有箭头和没箭头的区别 div > span span 是 div 的下一层级关系 在这种情况下找得到span元素: <div& ...
- css选择器学习(一)
1.通用选择器“*”和元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS选择器小结
在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的. 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得 ...
- html学习第二天—— 第八章—— CSS选择器
标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...
- 总结30个CSS选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- 30个最常用css选择器解析(zz)
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
- CSS选择器及其优先级
一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...
- HTML+CSS学习笔记(8)- CSS选择器
标签:HTML+CSS 什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是"选择器","选择器"指 ...
随机推荐
- Android--Fragment嵌套的问题
项目中遇到Fragment嵌套应用的问题 子Fragment中要用getChildFragmentManager()方法获取FragmentManager,否则会出问题!
- Java基础IO类之File类
大三了,目前基础太差了,重新学习过!代码如下,里面都有详细的解释每一行代码代表的意思~ package IODemo; import java.io.File; import java.io.File ...
- 在uboot里面添加环境变量使用run来执行
在uboot里面添加环境变量使用run来执行 本文链接:https://blog.csdn.net/u010979030/article/details/41038259 Author:杨正 Dat ...
- mouseover mouseleave
mouseover在当鼠标移入元素或其子元素的时候都会触发,是一个重复触发,冒泡的过程.见下面例子,一个父元素包含一个子元素,在其父元素内滑动鼠标,超出子元素的范围时,也会触发事件. 而mouseen ...
- 将double转化成string,并保持N位小数
double dumpSize = (1024000000.1415926535897932384 * 1.0) / 1024 / 1024; string tempStr = to_string(d ...
- [JZOJ5281]钦点题解--瞎搞+链表
[JZOJ5281]钦点题解--瞎搞+链表 题目链接 于 暴 力 过
- 免root xshell连接termux
免root实现xshell连接termux termux为安卓手机上的一款模拟linux终端的应用,由于手机上打字比较麻烦,所以想到了用电脑上的xshell通过ssh连接termux,以实现电脑控制t ...
- vue -- 数组过滤 filter (vue 表格)
如下图: 左边表格滑动滚轮,可以自动赋值右边表格: 现在是后台只有一个接口,把整个页面的数据全部返回出来了, 左边表格滑动到每一项时显示右边表格内容,但是需要code相同: 问题: 右边表格 ...
- FreeRTOS config开始的宏
FreeRTOSConfig.h系统配置文件中可以自定义,FreeRTOS.h中定义默认值 configAPPLICATION_ALLOCATED_HEAP 默认情况下FreeRTOS的堆内存是由编译 ...
- 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 ...