一、nth-of-type、nth-child

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

二、区别

1.用于元素节点

E:nth-of-type(n) E元素的父元素的子元素中第n个E元素匹配(不一定是E元素的父元素的第n个子元素)

E:nth-child(n)  E元素的父元素的第n个子元素且是E元素才匹配

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <meta name="format-detection" content="telephone=no">

    <title></title>

    <style>

        p {

            color:blue;

        }

        p:nth-of-type(1){

            background-color:red;

        }

        h1:nth-of-type(1){

            background-color: yellow;

        }

        /*p:nth-child(1){*/

            /*background-color:red;*/

        /*}*/

        /*h1:nth-child(1){*/

            /*background-color: yellow;*/

        /*}*/

    </style>

</head>

<body>

<div>

    <h1 class="type">0</h1>

    <p class="type">1</p>

    <p class="type">2</p>

    <p class="type">3</p>

    <p class="type">4</p>

</div>

</body>

</html>

:nth-of-type                                                 :nth-child

 

说明：h1为父元素的第一个子元素，无论是nth-of-type还是nth-child都可以匹配；p为父元素的第二子元素，所以nth-child无法匹配，而子元素中第一个p元素nth-of-type可以匹配。

2.用于class节点

(1)若classA的父元素的子元素的classA用于同一类型的元素节点

classA:nth-of-type(n) classA的父元素的子元素中第n个classA匹配(不一定是classA的父元素的第n个子元素)

classA:nth-child(n) classA元素的父元素的第n个子元素且是classA元素才匹配

   <style>

        p {

            color:blue;

        }

        /*.type:nth-of-type(1){*/

            /*background-color:red;*/

        /*}*/

        .type:nth-child(1){

            background-color:#f00;

        }

    </style>

<div>

    <h1>0</h1>

    <p class="type">1</p>

    <p class="type">2</p>

    <p class="type">3</p>

    <p class="type">4</p>

</div>

:nth-of-type                                                 :nth-child

 

(2)若classA的父元素的子元素的classA用于不同类型的元素节点

classA:nth-of-type(n) classA的父元素的子元素中，每种类型的元素节点中第n个classA匹配(不一定是classA的父元素的第n个子元素，也不一定是只有一个)

classA:nth-child(n) classA元素的父元素的第n个子元素且是classA元素才匹配

    <style>

        p {

            color:blue;

        }

        .type:nth-of-type(1){

            background-color:red;

        }

        /*.type:nth-child(1){*/

            /*background-color:#f00;*/

        /*}*/

    </style>

<div>

    <h1 class="type">0</h1>

    <p class="type">1</p>

    <p class="type">2</p>

    <p class="type">3</p>

    <p class="type">4</p>

</div>

:nth-of-type                                                 :nth-child

 

说明：.type:nth-child(1)匹配的是type的父元素的子元素中第一个子元素且class是type的h1元素，.type:nth-of-type(1)匹配的是type的父元素的子元素中h1和p元素的第一个class是type的元素，即0和1。

总结:

classA:nth-of-type(n) 匹配的是父元素的子元素中，每种类型的元素节点中第n个class类型是classA的元素(不一定是classA的父元素的第n个子元素，也不一定是只有一个)

classA:nth-child(n) 匹配的是父元素的第n个子元素且class类型是classA

三、共同

1.Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

:nth-of-type

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <meta name="format-detection" content="telephone=no">

    <script src="http://m.baidu.com/static/search/3600/zepto.js"></script>

    <title></title>

    <style>

        p {

            color:white;

        }

        p:nth-of-type(odd){

            background-color:red;

        }

        p:nth-of-type(even){

            background-color:blue;

        }

    </style>

</head>

<body>

<div>

    <div>0</div>

    <p class="type">1</p>

    <p class="type">2</p>

    <p class="type">3</p>

    <p class="type">4</p>

</div>

</body>

</html>

:nth-child

p {

      color:white;

}
p:nth-child(odd){

      background-color:red;

}

p:nth-child(even){

      background-color:blue;

}

:nth-of-type                                            :nth-child

   

2.使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

:nth-of-type

p {

     color:blue;

}

p:nth-of-type(2n+0){

     background-color:red;

}

:nth-child

p {

     color:blue;

}

p:nth-child(2n+0){

     background-color:#f00;

}

:nth-of-type                                       :nth-child

  

说明：p:nth-of-type(2n+0)为p元素的父元素的子p元素中，第0、2、4个p元素匹配

p:nth-child(2n+0)为p元素的子元素中，第0、2、4个子元素且是p元素才匹配

nth-of-type和nth-child的更多相关文章

  1. c# 之 System.Type.GetType()与Object.GetType()与typeof比较

    Object.GetType()与typeof的区别 //运算符,获得某一类型的 System.Type 对象. Type t = typeof(int); //方法,获取当前实例的类型. ; Con ...

  2. javascript脚本化文档

    1.getElememtById /** * 获取指定id的的元素数组 */ function getElements(/*ids...*/) { var elements = {}; for(var ...

  3. Sizzle 源码分析 （二）

    在Sizzle函数中,如果能快速处理或者通过querySelector处理,那么就使用它处理.否则使用select函数处理 . select函数 select = Sizzle.select = fu ...

  4. jquery-1.11.1.js

       每次想要使用这个js时,总是要到官网上下载,太麻烦,现在把它收录了 jquery-1.11.1.js /*! * jQuery JavaScript Library v1.11.1 * http ...

  5. Sphinx 2.2.11-release reference manual

    1. Introduction 1.1. About 1.2. Sphinx features 1.3. Where to get Sphinx 1.4. License 1.5. Credits 1 ...

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

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

  7. 【jQuery源码】preFilter

    preFilter: { "ATTR": function( match ) { //属性名解码 match[1] = match[1].replace( runescape, f ...

  8. ASP.NET之Jquery入门级别

    1.Jquery的简单介绍 1)Jquery由美国人John Resig创建.是继prototype之后又一个优秀的JavaScript框架. 2)JQuery能做什么?JQuery能做的普通的Dom ...

  9. 摘：数据结构各种算法实现(C++模板)

    目  录 1.顺序表. 1 Seqlist.h 1 Test.cpp 6 2.单链表. 8 ListNode.h 8 SingleList.h 10 test.cpp 20 3.双向链表. 22 No ...

  10. jQuery JavaScript Library v3.2.1

    /*! * jQuery JavaScript Library v3.2.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzle ...

随机推荐

  1. Golang 2018.1.2激活及使用技巧

    对于做Java开发的同学使用最熟练的开发工具应该当属Eclipse了吧,但是做到后面的话一般都会转用Intellij Idea.至于转用Intellij有什么好处我就不赘述了,简言之就是功能强大,使用 ...

  2. yarn (npm) 切换设置镜像源

    设置镜像源 1.查看一下当前源 yarn config get registry 2.切换为淘宝源 yarn config set registry https://registry.npm.taob ...

  3. sublime编写markdownm

    sublime编写markdownm 以前用有道云笔记,找了半天更改字体大小,结果还找不 到,那个字实在是太小了,像我这种有强迫症的患者,实 在受不了简约风格的有道云,所以上网找了与和诺插件并 受到一 ...

  4. TFS任务预览

    不太熟悉TFS任务项的建立. 初步建立及按老师要求分配到个人的任务设置与时间安排如下: (长时间任务可由多人合作完成,具体根据情况迅速调整任务分配) 加上每人需要进行阅读前一小组的代码需要时间2*8= ...

  5. TeamWork#3,Week5,Scrum Meeting 11.6, 11.7, 11.11, 11.12

    11.6:到目前为止基本已完成相关知识的学习,各方面工作都开始进行,一开始进行比较慢. 11.7:项目遇到困难,需要补充相关知识,进度慢了下来. 11.11:各方面工作进展比较顺利,没有什么大问题. ...

  6. 软件项目第一次Sprint评价

    1.9-652 首先该小组在第一个冲刺阶段的目标还是很明确的,按照这个目标去完成并实现任务,最后也确实是实现了.通过展示目前已经完成了界面的设计及实现.初步的游戏人物设定.生命值设定.除了完成的这些, ...

  7. 2018软工实践—Beta冲刺(4)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Beta 冲鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调组内工作 完成软件开发技术文稿 展示GitHub当日代码/文档签入 ...

  8. nigix安装

    树莓派安装nginx,参考http://blog.csdn.net/zizi7/article/details/54347223 1. 下载PCRE 并安装. 主页地址: ftp://ftp.csx. ...

  9. 手动解析Excel获取文件元数据

    工作中有遇到需要获取上传的Excel文件的列明.最大行数.大小等元数据信息.通常做法是通过Apache的POI工具加载文件然后再读取行列进行处理.这种方法很大的弊端就是需要把excel文件加载到内存, ...

  10. url 地址含参数较多如何拼接

    url 地址拼接是经常会遇到的问题.所以必须要掌握这个技术 1.合并参数对象,循环出来. var commonParams = { g_tk: 1928093487, inCharset: 'utf- ...