first-child与:first-of-type的区别
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) 也可以这样去理解
first-child与:first-of-type的区别的更多相关文章
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...
- Html中,id、name、class、type的区别
<input type="text" name="name" id="name" class="txt"> ...
- isinstance与type的区别
1.isinstance()内置函数 python中的isinstance()函数是python的内置函数,用来判断一个函数是否是一个已知类型.类似type. 2.用法: isinstance(obj ...
- python isinstance()与type()的区别
例如在继承上的区别: isinstance() 会认为子类是一种父类类型,考虑继承关系. type() 不会认为子类是一种父类类型,不考虑继承关系. class A: pass class B(A): ...
- class kind type sort区别
class多用于 级别比如高级货就是 first class,primary class等等,以此类推kind 和sort 基本一样,就像你说的,译为 种类,what kind of疑问,回答时用so ...
- python 内建函数isinstance的用法以及与type的区别
isinstance是Python中的一个内建函数 语法: isinstance(object, classinfo) 如果参数object是classinfo的实例,或者object是class ...
- isinstance 和 type 的区别
class A: pass class B(A): pass isinstance(A(), A) # returns True type(A()) == A # returns True isins ...
- 【学习总结】Python-3- 类型判断之 isinstance 和 type 的区别
菜鸟教程-Python3-基本数据类型 关于类型查询: type() 函数:可以用来查询变量所指的对象类型 用 isinstance()函数:判断是否是某个类型 两者的区别: type()不会认为子类 ...
- const type& 与 type& 的区别
const type& 与 type& 是C/C++编程中容易混淆的两个知识点,现在以 cont int& 与 int& 为例讲解: 1.int& 讲解 int ...
- form表单重复提交,type=“button”和type=“submit”区别
公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...
随机推荐
- scala中计算的的一个小问题,超出Int.maxValue时不会报错
如果小于Int.max时他不会报错 def sumcount(str:String): Int ={ val ints = for(c <- str)yield { println(c.asIn ...
- vsftpd 服务移植出现 500 oops : socket 解决
一开始, 在vsftpd 打印的错误是 500 oops : socket 在 vsftpd 源码里面找到 buildroot-2016.05/output/build/vsftpd-3.0.3/sy ...
- webservice文件上传下载
使用DataHandler实现webservice的文件上传下载 服务端代码: package com.hello.weChat.controller; import javax.activation ...
- rt serial 的编写
/* * Copyright (C) 2005-2007 Jan Kiszka <jan.kiszka@web.de>. * * Xenomai is free software; you ...
- PHP——内测:新闻管理练习题及答案(自己做的)
试题看文件:1.28练习内测:新闻管理.pdf 数据库为newssystem 表为news 表内容为 fabuxinwen.php <!DOCTYPE html PUBLIC "-// ...
- 三、thinkphp
'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TMPL_R_DELIM'=>'}&g ...
- Tomcat热部署及错误排查
Maven的热部署 第一步:配置Tomcat的登陆的用户名与密码 C:\apache-tomcat-7.0.33\conf\ tomcat-users.xml 从第36行开始配置 <r ...
- 很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
版权声明:本文为博主原创文章,未经博主允许不得转载. 在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的 需求,那 ...
- CSS3制作文字半透明倒影效果
效果如图.Ps.背景线条是背景图勒,和本文效果无关... html代码如下: <div class="content"> <h3 title="专业 ...
- 【BZOJ】1662: [Usaco2006 Nov]Round Numbers 圆环数(数位dp)
http://www.lydsy.com/JudgeOnline/problem.php?id=1662 这道题折腾了我两天啊-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 果然 ...