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): ...
随机推荐
- [nginx]代理404跳转
1.nginx作为反向代理,如果代理请求的页面不存在,返回404,但是浏览器中一片空白. 要求:将404跳转到指定页面. 在server段添加: error_page 404 /; 不能生效,原因是需 ...
- WPF:为什么使用ContentPresenter.ContentSource而不是Content属性?
因为ContentPresenter.ContentSource比Content属性加一个TemplateBinding看起来更方便?不仅仅是这些,实际上如果用ContentSource的话,Cont ...
- 安卓弹出键盘隐藏fixed定位相关的元素(obj必须是class)
//安卓弹出键盘隐藏fixed定位相关的元素(obj必须是class) function displayFixed(obj){ var h = document.body.scrollHeight; ...
- Android项目分包---总结-------直接使用
注: 本文是从该文摘抄而来的.简单的说,就是阅读了该文,然后,再自己复述,复制形成该文. 1.罗列Android项目的分包规则 微盘使用分包规则 如下: 1).第一层com.sin ...
- [J]computer network tarjan边双联通分量+树的直径
https://odzkskevi.qnssl.com/b660f16d70db1969261cd8b11235ec99?v=1537580031 [2012-2013 ACM Central Reg ...
- 【洛谷 P3187】 [HNOI2007]最小矩形覆盖 (二维凸包,旋转卡壳)
题目链接 嗯,毒瘤题. 首先有一个结论,就是最小矩形一定有条边和凸包重合.脑补一下就好了. 然后枚举凸包的边,用旋转卡壳维护上顶点.左端点.右端点就好了. 上顶点用叉积,叉积越大三角形面积越大,对应的 ...
- python初步学习-python控制流
语句书写规范 缩进在python语言书写中非常重要,如果缩进不规范,执行程序将会报错 引用维基百科中的叙述: Python開發者有意讓違反了縮排規則的程序不能通過編譯,以此來強迫程序員養成良好的編程習 ...
- 【HNOI】d 最小割
[题目大意]给定一个n*m的土地,每块可以种a或b作物,每种作物在不同的位置有不同的收成,同时,有q个子矩阵中,全部种指定的作物(a或b)会有一定的加成收成,求最大收成. [数据范围] 50% n,m ...
- Python 开发中easy_install的安装及使用
easy_install是一个python的扩展包,主要是用来简化python安装第三方安装包,在安装了easy_install之后,安装python第三方安装包就只需要在命令行中输入:easy_in ...
- perl6文件操作
use v6; #perl6中读取文件方法 #:r 只读, :w 只写, :rw 读写, :a 追加 my $fp = open 'filename.txt', :rw; for $fp.^metho ...