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): ...
随机推荐
- Java日期时间实用工具类
Java日期时间实用工具类 1.Date (java.util.Date) Date(); 以当前时间构造一个Date对象 Date(long); 构造函数 ...
- lightoj 1214
lightoj 1214 Large Division (大数除法) 链接:http://www.lightoj.com/volume_showproblem.php?problem=1214 题意 ...
- 深度学习---tensorflow简介
个core可以有不同的代码路径.对于反向传播算法来说,基本计算就是矩阵向量乘法,对一个向量应用激活函数这样的向量化指令,而不像在传统的代码里会有很多if-else这样的逻辑判断,所以使用GPU加速非常 ...
- maven中package和install命令的区别
mvn package 编译并打包工程,根据pom文件中packaging是jar还是war进行打包,会在项目的target目录下生成一个jar/war包. mvn install 打包并安装到mav ...
- 【设计模式】 模式PK:包装模式群PK
1.概述 我们讲了这么多的设计模式,大家有没有发觉在很多的模式中有些角色是不干活的?它们只是充当黔首作用,你有问题,找我,但我不处理,我让其他人处理.最典型的就是代理模式了,代理角色接收请求然后传递到 ...
- 【BZOJ】1709: [Usaco2007 Oct]Super Paintball超级弹珠
[算法]模拟 [题解]O(n^2)预处理横线(y),纵线(x),主对角线(y-x+n),副对角线(x+y). 然后n^2枚举每个点.
- python学习笔记(一)之为什么学习python
python的特点: 跨平台 实现同一个功能是Java代码的1/5 python应用范围: 操作系统 web 3D动画 企业应用 云计算 如何学习python? 学习语法 验证例子 学会总结 课外实践
- Intersecting Lines (计算几何基础+判断两直线的位置关系)
题目链接:http://poj.org/problem?id=1269 题面: Description We all know that a pair of distinct points on a ...
- js_页面关闭beforeunload事件
做圆桌爆文公众号的时候,需要对阅读的文章进行时间统计.是这个公众号的核心功能,客户把文章转发到朋友圈或者转给朋友,记录谁阅读此文章和阅读时长进行记录,从而展示给客户. 功能点是,关闭页面时触发事件,请 ...
- perl发送post数据
把post数据写进一个匿名数组里就行 #!/usr/bin/env perl -w use strict; use LWP::UserAgent; my $ua = LWP::UserAgent-&g ...