之前一直开发的是兼容老版本的代码,所以很少用到有关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的区别的更多相关文章

  1. css3的transform,translate和transition之间的区别与作用

    transform 和 translate transform的中文翻译是变换.变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是 ...

  2. ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系

    ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...

  3. CSS3伪类和伪元素的特性和区别

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...

  4. const type& 与 type& 的区别

    const type& 与 type& 是C/C++编程中容易混淆的两个知识点,现在以 cont int& 与 int& 为例讲解: 1.int& 讲解 int ...

  5. form表单重复提交,type=“button”和type=“submit”区别

    公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...

  6. from中buttone 和 input type="button" 区别

    在做一个表单提交时碰到的问题, 1.js判断阻止表单提交,如果是form 里面的button的话,恭喜你,你要再换个写法了.<button type="submit" ... ...

  7. Html中,id、name、class、type的区别

    <input type="text" name="name" id="name" class="txt"> ...

  8. isinstance与type的区别

    1.isinstance()内置函数 python中的isinstance()函数是python的内置函数,用来判断一个函数是否是一个已知类型.类似type. 2.用法: isinstance(obj ...

  9. linux 命令中的find locate whereis which type 使用区别

    find 最强大,但参数也较多,需指定查找目录,如 find / -name “filename” locate 是一个快速查找命令,有预先索引好的数据库,由于数据库是定时更新,因此,结果上可能会有迟 ...

  10. python isinstance()与type()的区别

    例如在继承上的区别: isinstance() 会认为子类是一种父类类型,考虑继承关系. type() 不会认为子类是一种父类类型,不考虑继承关系. class A: pass class B(A): ...

随机推荐

  1. hadoop配置文件详解、安装及相关操作

    一.      Hadoop伪分布配置 1. 在conf/hadoop-env.sh文件中增加:export JAVA_HOME=/home/Java/jdk1.6            2.  在c ...

  2. Intervals ZOJ - 3953 (区间贪心)

    Chiaki has n intervals and the i-th of them is [li, ri]. She wants to delete some intervals so that ...

  3. Java设计模式の装饰者模式

    目录 一.问题引入 二.设计原则 三.用装饰者模式解决问题 四.装饰者模式的特点 五.装饰者模式的定义 六.装饰者模式的实现 七.java.io包内的装饰者模式 一.问题引入 咖啡店的类设计: 一个饮 ...

  4. AngularJs学习——常用表单指令练习

    一.知识点 ng-show.ng-hide.ng-if(控制元素显示隐藏,区别在于ng-hide是是否显示隐藏元素,而ng-if是是否移除元素): ng-src.ng-class(为元素添加路径和cl ...

  5. linux删除乱码

    一:前沿 好久没有记载东西了,回来之后一直忙着改东西,我走之前项目是什么样,回来后也差不多.郁闷啊,努力敲代码,但是要敲出思想来啊.先会做,然后深入思考 二:内容 (1)每次使用rz命令向服务器上传代 ...

  6. 8.IO模型

    一.事件驱动模型 服务器处理模型程序,通常有以下几种: (1)收到一个请求则创建一个新的进程来处理这个请求 (2)收到一个请求则创建一个新的线程来处理这个请求 (3)收到一个请求,把它放入事件列表,让 ...

  7. [Luogu 3224] HNOI2012 永无乡

    [Luogu 3224] HNOI2012 永无乡 特别水一个平衡树题. 不认真的代价是调试时间指数增长. 我写的 SBT,因为 Treap 的 rand() 实在写够了. 用并查集维护这些点的关系, ...

  8. 常见的Shell

    上面提到过,Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本. Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说 ...

  9. 【BZOJ4821】【SDOI2017】相关分析 [线段树]

    相关分析 Time Limit: 10 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description Frank对天文学非常感兴趣,他经 ...

  10. Python 对象的深拷贝与浅拷贝 -- (转)

    本文内容是在<Python核心编程2>上看到的,感觉很有用便写出来,给大家参考参考! 浅拷贝 首先我们使用两种方式来拷贝对象,一种是切片,另外一种是工厂方法.然后使用id函数来看看它们的标 ...