css3之nth-child和nth-of-type的区别
之前一直开发的是兼容老版本的代码,所以很少用到有关c3里面的代码格式,
今天就对于使用的c3选择器中nth-child和nth-of-type做一个区分。
首先:
1.nth-child(n):是选择父级元素下对应位置的对应子元素,n是代表第几个。
2.nth-of-type(n):是选择父级元素下对应的元素的第几个,n代表第几个。
是不是在第一次没看懂这两句话的含义?那么这么写在结合一下你就会恍然大悟。
<div>
<h1>1111</h1>
<p>2222</p>
<p>3333</p>
</div>
同样对于去选中第一个P元素。他们的代码却是这样的
p:nth-child(2);
p:nth-of-type(1);
这就明白了把。
p:nth-child(n)的n是取决于第n个位置必须出现的p元素,再能被选中
而
p:nth-of-type(n)是取决于父级下面的p元素,的第n个。
css3之nth-child和nth-of-type的区别的更多相关文章
- css3的transform,translate和transition之间的区别与作用
transform 和 translate transform的中文翻译是变换.变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是 ...
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...
- CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
- const type& 与 type& 的区别
const type& 与 type& 是C/C++编程中容易混淆的两个知识点,现在以 cont int& 与 int& 为例讲解: 1.int& 讲解 int ...
- form表单重复提交,type=“button”和type=“submit”区别
公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...
- from中buttone 和 input type="button" 区别
在做一个表单提交时碰到的问题, 1.js判断阻止表单提交,如果是form 里面的button的话,恭喜你,你要再换个写法了.<button type="submit" ... ...
- 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 ...
- linux 命令中的find locate whereis which type 使用区别
find 最强大,但参数也较多,需指定查找目录,如 find / -name “filename” locate 是一个快速查找命令,有预先索引好的数据库,由于数据库是定时更新,因此,结果上可能会有迟 ...
- python isinstance()与type()的区别
例如在继承上的区别: isinstance() 会认为子类是一种父类类型,考虑继承关系. type() 不会认为子类是一种父类类型,不考虑继承关系. class A: pass class B(A): ...
随机推荐
- iOS-防止向SQLite数据库中插入重复数据记录:
原则:先检测该数据库的指定表中,是否已经存在我们要插入的这条数据记录,若已经存在,则不插入这条数据记录(即忽略此次插入操作),若尚不存在,才插入这条数据记录(即才执行此次插入操作) 我们这里使用的是F ...
- UVA315:Network(求割点)
Network 题目链接:https://vjudge.net/problem/UVA-315 Description: A Telephone Line Company (TLC) is estab ...
- Leetcode 485. 最大连续1的个数
1.题目描述(简单题) 给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1] 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 ...
- eclipse常见问题解决方案
1.maven项目,启动报错ClassNotFoundException,原因是tomcat下\WEB-INF\classes目录中,java文件没有编译成class文件.解决方法: 在\WEB-IN ...
- [freemarker篇]01.入门Freemarker示例
这今天“弄”军哥的管理系统,里面由涉及到一部分的FreeMarker的知识,并且我那些学生在亚信实习也涉及到这部分的知识,所以想开始总结一些FreeMarker,正好我可开始使用一下Maven,简单的 ...
- Mybatis 参考
1:Mybatis最入门---ResultMaps基本用法 2:Mybatis最入门---ResultMaps高级用法(上) 3:Mybatis最入门---ResultMaps高级用法(下) 4:My ...
- LightOJ 1151 - Snakes and Ladders 高斯消元+概率DP
首先来个期望的论文,讲的非常好,里面也提到了使用线性方程组求解,尤其适用于有向图的期望问题. 算法合集之<浅析竞赛中一类数学期望问题的解决方法> http://www.lightoj.co ...
- 正则表达式实现将html文本转换为纯文本格式(将html字符串转换为纯文本方法)
Regex regex = new Regex("<.+?>", RegexOptions.IgnoreCase); string strOutput = regex. ...
- Android中的异常情况
1.setText()方法中,如果参数是int类型,Android会把它当做是一个id查找,报以下异常,因此解决办法就是将参数转化为String类型 如:setText(num) è setText( ...
- 顺序图(Sequence Diagram)
顺序图(Sequence Diagram): 是一种强调对象间消息传递次序的交互图,又称为时序图或序列图.描述了在一个用例或操作的执行过程中对象如何通过消息相互交互,说明了消息如何在对象之间被发送和接 ...