之前一直开发的是兼容老版本的代码,所以很少用到有关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. HDU 5636 关键点的 floyd 最短路问题

    Shortest Path Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  2. Samba共享传输大文件(ex:1G)失败的问题

    1:问题描述 1.1 基本信息 遇见这样一个bug,路由器有USB share的功能,可将U盘内的文件通过samba和LAN端PC机中文件进行共享,测试发现小文件可正常共享,一旦文件大了(比如1G左右 ...

  3. Mac 访问隐藏文件方法! 网上方法在我电脑上都不可用!

    百度的方法: 如果你想打开整个系统的隐藏文件可以在终端下输入以下命令 defaults write com.apple.finder AppleShowAllFiles -bool true 关闭显示 ...

  4. windows版本redis下载安装

    官方网站:http://redis.io/ 官方下载:http://redis.io/download 可以根据需要下载不同版本 在官方下载网页中有一个window版本的说明,说redis官方没有wi ...

  5. 【BZOJ2946】公共串 [SAM]

    公共串 Time Limit: 3 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 给出几个由小写字母构成的单词,求它们最 ...

  6. bzoj3671 [Noi2014]随机数生成器

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3671 [题解] 贪心从1...n*m取,开两个5000*5000的数组就够了,可以重复利用, ...

  7. [IOS]VMware上虚拟机MAC安装XCode

    1:VMware上虚拟机MAC安装前 VMware上安装Xcode之后 2:安装Xcode过程:把Xcode复制到虚拟机桌面上 3:复制完成之后,双击Xcode_6.4.dmg 文件 4:把Xcode ...

  8. css纯样式导航

    <style>.dropdown {    position: relative;    display: inline-block;} .dropdown-content {    di ...

  9. grunt、Browsersync服务及weinre远程调试

    一.grunt server服务 前端开发时,经常需要把静态文件映射成web服务,传统的做法是丢到apache,但太重太不友好了.开发angular的时候,官方的chrome插件对file:///的支 ...

  10. python中的Queue模块

    queue介绍 queue是python的标准库,俗称队列.可以直接import引用,在python2.x中,模块名为Queue.python3直接queue即可 在python中,多个线程之间的数据 ...