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,左右平均居中 ...
随机推荐
- QQ左侧滑动显示之自定义属性
上一篇为大家实现了最基本的侧滑效果,相信很多小伙伴已经发现一个小问题了,修改Menu右侧的宽度时,我们需要修改我们的自定义方法,这样非常不方便,下面就为大家介绍一下如何通过自定义属性来控制这个的变化. ...
- JAVA设计模式《一》
设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于 ...
- Cocos2d-x 3.2 学习笔记(十四)保卫萝卜之界面UI
保卫萝卜~上一篇说了使用CocoStudio制作主界面,这里来完善主界面动画及后续界面(主题界面ThemeUI.场景选择界面SelectMapUI),主要涉及的控件PageView. 学习要 ...
- spring 源码分析之BeanPostProcessor
1.官方解答: Factory hook that allows for custom modification of new bean instances, e.g. checking for ma ...
- [New Portal]Windows Azure Virtual Machine (18) Azure Virtual Machine内部IP和外部IP
<Windows Azure Platform 系列文章目录> 在开始本章内容之前,请读者熟悉以下2篇博文: [New Portal]Windows Azure Virtual ...
- 微信开发之.Net
撸主是一个新手,最近几天在研究微信服务号交互,上网搜了搜C#的代码,再结合自己的习惯,下面把代码解析一下,其中有些代码非本人原创. 首先,你要有个公众服务号,只有服务号才可以自定义菜单,没有条件的可以 ...
- HTML语义化:HTML5新标签——template
一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...
- Spring MVC 原理介绍(执行流程)
Spring MVC工作流程图 图一 图二 Spring工作流程描述 1. 用户向服务器发送请求,请求被Spring 前端控制Servelt DispatcherServle ...
- 一个有意思的js小问题
问题:如何实现以下函数? add(2, 5); // 7 add(2)(5); // 7 第一个就不用说了,很简单,关键是看第二个,add(2)(5),可见add(2)应该返回的是一个函数,这个函数再 ...
- 基于C#的MongoDB数据库开发应用(1)--MongoDB数据库的基础知识和使用
在花了不少时间研究学习了MongoDB数据库的相关知识,以及利用C#对MongoDB数据库的封装.测试应用后,决定花一些时间来总结一下最近的研究心得,把这个数据库的应用单独作为一个系列来介绍,希望从各 ...