css选择器中:first-child与:first-of-type的区别
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码:
p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素;
h1:first-child 匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个;
span:first-child 匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素;
然后,在css3中又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?还是看那段代码:
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) 也可以这样去理解。
css选择器中:first-child与:first-of-type的区别的更多相关文章
- 【轻松前端之旅】CSS选择器中的空格与尖括号有何区别?
CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...
- css选择器中:first-child 与 :first-of-type的区别
## css选择器中:first-child 与 :first-of-type的区别 ---- :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比 ...
- CSS选择器中的特殊性
我们来看一下一个简单的例子: <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- CSS选择器中带点(.)怎么办?
在SharePoint中很多元素的ID都用点(.)来连接的,比如: <li class="ms-cui-group" id="Ribbon.Documents.Ed ...
- css 选择器中的正则表达式
正则表达式在任何语言中都有使用,只是使用的形式不一样而已 css也是一门语言,也有自己的正则表达式 正则表达式中的一些通用规则: 1 ^ 表示字符串开始位置匹配 2 $表示字符串结束为止匹配 3 *表 ...
- [转] css选择器中:first-child与:first-of-type的区别
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素: ...
- css类选择器中 空格 逗号 啥都不填的区别及其他笔记
.a.b 代表 一个元素上 同时 有 a 类 和 b 类 .a .b (中间有空格) 代表 .b 是 .a 的子元素选择. .a,.b 代表 class='a' 和 class='b' 都会被选择上.
- CSS选择器笔记,element element和element > element 的区别
看官方解释 element element 例子: div p 官方解释:div内部所有的p元素 就是说 只要p在div内部.如果 p在span内部,span在div内部,p也算在div内部 < ...
- css 样式中 margin padding和top类定位的区别
1 margin margin 是外边距的意思,是边框到外部另一元素之间的距离,允许使用负值 语法结构: margin:5px auto; 意思上下为5,左右平均居中 ...
随机推荐
- .NET面试题解析(05)-常量、字段、属性、特性与委托
系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 弱小和无知不是生存的障碍,傲慢才是!——<三体> 常见面试题目: 1. const和reado ...
- 深入理解javascript函数系列第二篇——函数参数
× 目录 [1]arguments [2]内部属性 [3]函数重载[4]参数传递 前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传 ...
- hdu4751Divide Groups(dfs枚举完全图集合或者bfs染色)
/************************************************************************* > File Name: j.cpp > ...
- poj1006生理周期(中国剩余定理)
/* 中国剩余定理可以描述为: 若某数x分别被d1..….dn除得的余数为r1.r2.….rn,则可表示为下式: x=R1r1+R2r2+…+Rnrn+RD 其中R1是d2.d3.….dn的公倍数,而 ...
- java向mysql数据库插入数据显示乱码的问题
在做一个java web工程时,有时会碰到在向数据库添加数据库时,结果出现乱码”???“的问题.针对该问题的主要解决办法就是: 一.确保是否添加了字符集过滤器: 在java web工程中的web.xm ...
- [OpenCV] Samples 05: convexhull
得到了复杂轮廓往往不适合特征的检测,这里再介绍一个点集凸包络的提取函数convexHull,输入参数就可以是contours组中的一个轮廓,返回外凸包络的点集 ---- 如此就能去掉凹进去的边. 对于 ...
- 微软Team Foundation Service 的Scrum模板中的Feature和Backlog Items 的区别【转载】
Features help us plan work better in Team Foundation Service Scrum process [原文:http://www.nsilverbul ...
- 【模式匹配】KMP算法的来龙去脉
1. 引言 字符串匹配是极为常见的一种模式匹配.简单地说,就是判断主串\(T\)中是否出现该模式串\(P\),即\(P\)为\(T\)的子串.特别地,定义主串为\(T[0 \dots n-1]\),模 ...
- 【原创】Django-ORM进阶
基础部分已经写完:[原创]Django-ORM基础 以下部分将对表与表之间的关联操作做以介绍 models.py #_*_coding:utf-8_*_ from django.db import m ...
- 7z命令行参数中的路径
最近在自动化的过程中用到了7z命令行工具,发现其参数中的路径挺有意思的,在此总结一下.本文中所有demo使用的7z版本为:15.14 x64. 压缩某个文件夹 下面的命令会把g:\temp\目录和目录 ...