Do l have to 非做不可吗?　　He is my age. 他和我同岁。　　Here you are. 给你。　　No one knows . 没有人知道。

关于nth-child && nth-of-type的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家

用标签进行选择：
写法一：
<body>
    <div class="aaa">
        <p>111</p>
        <p>222</p>
        <p>333</p>
        <p>444</p>
        <p>555</p>
        <p>666</p>
        <p>777</p>
    </div>
</body>
使用nth-child得出的效果     p:nth-child(n+2){   color:red;     }

111

 
使用nth-of-type得出的效果：     p:nth-of-type(n+2){  color:green;  }
 

111

由以上两个效果图可知，在父级元素（div.class=aaa）下只有p标签的时候，两者没什么区别。
 
写法二：
<body>
    <div class="aaa">
        <span>哈哈</span>
        <p>111</p>
        <p>222</p>
        <p>333</p>
        <p>444</p>
        </div>
</body>
css中使用p:nth-child(n+2)的时候，效果如下：
 
哈哈

css中使用p:nth-of-type(n+2)的时候，效果如下：
 
哈哈

111

 
由此可知，nth-child和nth-of-type的区别就是nth-child只选择父级元素下的第几个子元素，不会对子元素的标签进行区分，如选择的条件是n+2,从父级元素第二个子元素开始选择，当第二个元素是p标签则进行选择，如果不是则跳过，如：
html: <body>
    <div class="aaa">
        <span>span0000</span>
         <p>00000</p>
        <span>哈哈</span>
        <p>111</p>
        <span>hahaah</span>
        <p>222</p>
        <p>333</p>
        <p>444</p>
        </div>
</body>
css: p:nth-child(n+2){color: red;}
 

span0000

哈哈

hahaah

 
而nth-of-type会选择标签的第几个元素，如，p:nth-of-type(n+2)，就是读取父级元素下p标签的第几个元素。当你在p标签之中插入其他标签的时候，也是读取p标签的第几个元素。如：
 
span0000

00000

哈哈

hahaah

 
以上讲解的是nth-child &  nth-of-type都是用标签进行选择，下面讲讲它们用class类名进行选择的区别
写法一：
<body>
    <div>
        <p class="bbb">111</p>
        <p class="bbb">222</p>
        <p class="bbb">333</p>
        <p class="bbb">444</p>
        <p class="bbb">555</p>
        <p class="bbb">666</p>
        <p class="bbb">777</p>
    </div>
</body>
这种写法使用nth-child和nth-of-type的效果一样，和标签选择的效果也一样，所以不再详细说明。

写法二：
<body>
    <div class="aaa">
        <span>span哈哈</span>
        <p class="bbb">p:111</p>
        <p class="bbb">P:222</p>
        <span>我是span标签</span>
        <p class="bbb">P:333</p>
        <span>我是span标签2</span>
        <p class="bbb">P:444</p>
    </div>
</body>
使用.bbb:nth-child(n+2){color:red;}使用的效果如图，
 
span哈哈

p:111

P:222

我是span标签

P:333

我是span标签2

P:444

 
而使用.bbb:nth-of-type(n+2){color:green;}的效果是：
 
span哈哈

p:111

P:222

我是span标签

P:333

我是span标签2

P:444

 
这就有个问题，nth-child和nth-of-type是否是根据class类名进行选择，还是根据标签选择，为了测试，我将html改为：
<body>
    <div class="aaa">
        <span>span:哈哈</span>
        <p>P:111</p>
        <p>222</p>
        <span>我是span标签</span>
        <p class="bbb">P:333</p>
        <span>我是span标签2</span>
        <p class="bbb">P:444</p>
        <p class="bbb">P:555</p>
        <p class="bbb">P:666</p>
    </div>
</body>
使用.bbb:nth-child(n+2){color:red;}使用的效果如图：
 

span0:哈哈

P0:111

P0:222

我是span0标签

P.bbb:333

我是span0标签2

P.bbb:444

P.bbb:555

P.bbb:666

而使用.bbb:nth-of-type(n+2){color:green;}的效果是：
 

span0:哈哈

P0:111

P0:222

我是span0标签

P.bbb:333

我是span0标签2

P.bbb:444

P.bbb:555

P.bbb:666

 
而当给“222”和“333”之间的span标签加上一个class=“bbb”的类名的时候，出现的效果如图：
html:
<body>
    <div class="aaa">
        <span>span0:哈哈</span>
        <p>P0:111</p>
        <p>P0:222</p>
        <span class="bbb">我是span.bbb标签</span>
        <p class="bbb">P.bbb:333</p>
        <span>我是span0标签2</span>
        <p class="bbb">P.bbb:444</p>
        <p class="bbb">P.bbb:555</p>
        <p class="bbb">P.bbb:666</p>
    </div>
</body>
 
p:nth-child(n+2){color:red;}
效果
 

span0:哈哈

P0:111

P0:222

我是span.bbb标签

P.bbb:333

我是span0标签2

P.bbb:444

P.bbb:555

P.bbb:666

 
p:nth-of-type(n+2){color:green;
}
效果：

span0:哈哈

P0:111

P0:222

我是span.bbb标签

P.bbb:333

我是span0标签2

P.bbb:444

P.bbb:555

P.bbb:666

由以上两个效果图可知，nth-child和nth-of-type可以通过class类名进行选择，nth-child是从父元素div下的第二个子元素进行判断，如果拥有该class类名，则进行选中；但是 nth-of-type是首先判断class名的标签的类型，再分别对不同的标签从对应的位置开始选择拥有该类名的元素(如这里，先开始给p标签从第二个元素开始选择，如果拥有该类名则选中，再给span标签的第二个元素开始选择，如果拥有该类名则选中)。
总结：
nth-child:
1、用标签进行选择：如p:nth-child（n+2）
对父级元素的子元素进行统计，从第二个子元素开始判断，如果是该标签则选中
2、用类名进行选择：如.div：nth-child(n+2)
同理，对父级元素的子元素进行统计，从第二个子元素开始判断，如果子元素拥有该类目则选中。
 
nth-of-type:
1、用标签进行选择：如p:nth-of-type（n+2）
父级元素的子元素的p标签，从第二个p标签开始选中
2、用类名进行选择：如.div：nth-of-type(n+2)
父级元素拥有class=“div"的所有不同的标签并分别进行判断，分别对不同的标签的第二个元素开始判断，如果拥有class=“div”的类名则选中。

nth-child & nth-of-type区别的更多相关文章

  1. linux中查找命令find、locate、whereis、which、type区别

    linux中查找命令find.locate.whereis.which.type区别 1. find Java代码 find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件.与查询数据库(/ ...

  2. child和childNodes的区别

    child和childNodes区别: childNodes是标准属性, child是非标准属性 childNodes: 获取节点,不同浏览器表现不同 IE 只获取元素节点 非IE 获取元素节点和文本 ...

  3. instance与type区别

    class Foo(object): pass class Bar(Foo): pass obj = Bar() # isinstance用于判断,对象是否是指定类的实例 (错误的) # isinst ...

  4. 一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: <!Doctype html& ...

  5. python 内建函数isinstance的用法以及与type的区别

    isinstance是Python中的一个内建函数 语法: isinstance(object, classinfo)   如果参数object是classinfo的实例,或者object是class ...

  6. 刷题19. Remove Nth Node From End of List

    一.题目说明 这个题目是19. Remove Nth Node From End of List,不言自明.删除链表倒数第n个元素.难度是Medium! 二.我的解答 链表很熟悉了,直接写代码. 性能 ...

  7. Doctype作用，标准模式与兼容模式的区别

    <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以 ...

  8. orcle自定义类型type/create or replace type

    一.type / create or repalce type 区别联系 相同: 可用关键字create type 或者直接用type定义自定义类型, 区别: create type 变量 as ta ...

  9. Python type() 函数

    描述 type() 函数如果你只有第一个参数则返回对象的类型,三个参数返回新的类型对象.类似isinstance() isinstance() 与 type() 区别: type() 不会认为子类是一 ...

  10. 转载：oracle 自定义类型 type / create type

    标签:type create oracle object record 一:Oracle中的类型有很多种,主要可以分为以下几类: 1.字符串类型.如:char.nchar.varchar2.nvarc ...

随机推荐

  1. MM-RGV、AGV 、IGV是什么

    RGV.AGV.IGV是什么 智能化物流仓储设备迅速崛起的时代,RGV.AGV.IGV,这三种看似有血缘关系的智能设备,到底有什么不同呢? RGV RGV即“有轨制导车辆”,又叫有轨穿梭小车,是与地面 ...

  2. FlashDevelop关闭分号自动格式化

    菜单Tools-Program Settings-ASCompletion-Helpers-Characters Requiring Whitespace 清空",;*+-=/%<&g ...

  3. OGNL表达式(转载)

    OGNL表达式(转载)   1.什么是OGNL OGNL:Object Graphic Navigation Language(对象图导航语言) 它是Struts2中默认的表达式语言.使用表达式需要借 ...

  4. RabbitMQ系列教程之四：路由（Routing）（转载）

    RabbitMQ系列教程之四:路由(Routing) (使用Net客户端) 在上一个教程中,我们构建了一个简单的日志系统,我们能够向许多消息接受者广播发送日志消息. 在本教程中,我们将为其添加一项功能 ...

  5. Linux性能测试分析命令_vmstat

    vmstat命令主要是对操作系统的虚拟内存.进程.IO读写.CPU活动等整体情况进行统计.但是它不能对某个进程进行深入分析. vmstat基本语法 命令使用格式:vmstat [options] [d ...

  6. [ SHELL编程 ] echo和printf使用实例

    本文主要描述Linux系统中echo和printf命令的使用方法,包括命令参数的含义.使用技巧. 1.echo    了解一个命令我们首先要知道它能做什么,它有哪些参数,参数的含义,可以实现我们哪方面 ...

  7. vue项目bug-Couldn’t find preset "es2015"

    在使用vue项目的时候安装了其他的插件,发现会报错 Couldn’t find preset "es2015".是因引用的插件使用了es标准,解决办法如下 npm install ...

  8. 如何用java完成一个中文词频统计程序

    要想完成一个中文词频统计功能,首先必须使用一个中文分词器,这里使用的是中科院的.下载地址是http://ictclas.nlpir.org/downloads,由于本人电脑系统是win32位的,因此下 ...

  9. SSM商城项目（一）

    1. 学习计划 1.电商行业的背景. 2.宜立方商城介绍 3.宜立方商城的系统架构 a) 功能介绍 b) 架构讲解 4.工程搭建-后台工程 a) 使用maven搭建工程 b) 使用maven的tomc ...

  10. 第五周特种JAVA健民欧巴分享经验

    1.int为原始数据类型,没有特殊含义: 另一个为引用类型:该类型定义后可以开辟内存空间: 2.特殊值null:代表一个对象变量不引用任何对象//null不是为空,就是什么都没有. 3.  “==” ...