一、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. 【Kubernetes】基于角色的权限控制：RBAC

    Kubernetes中所有的API对象,都保存在Etcd里,对这些API对象的操作,一定都是通过访问kube-apiserver实现的,原因是需要APIServer来做授权工作. 在Kubernete ...

  2. TeamWork#1,Week 2,Learn In Team

    我觉得做为一个团队,每个人的能力固然重要,但是更重要的是几个人能同心协力. 俗话说“三个臭皮匠,赛过诸葛亮”,团队合作往往能激发出团体不可思议的潜力,集体协作干出的成果往往能超过成员个人业绩的总和.在 ...

  3. spring冲刺第三天

    昨天完成了环境配置和初步的地图设想. 今天从网上找了有关这方面的例子,运行试验了一番.编写的地图画面在程序上运行了一下,有些错误,还需要很多方面的改进. 这些例子有很多地方都不太懂,但还是看完了.我认 ...

  4. WebGL七点二

    与上一节相比这一节相当做了些整合和整理,目的是提高了读写效率和减少代码量,就是做了优化.这里我们只需要在顶点着色器中定义一个用于从js传递参数的变量u_MvcMatrix一看就知道是uniform变量 ...

  5. BNUOJ 52308 We don't wanna work! set模拟

    题目链接: https://acm.bnu.edu.cn/v3/problem_show.php?pid=52308 We don't wanna work! Time Limit: 60000msM ...

  6. Results the mutual for the first time（alpha阶段总结）

    由于前天听大家的成果展时,做得笔记不够完善,有一两个组找不到信息,如果没有评到的组望谅解. 分数分配: 由于组内某些原因,我们现重新分组: 试用版: 总结前阶段的工作: 在前一段时间,我们第一个spr ...

  7. Week4-作业1：阅读与博客

    第四章.两人合作 1.原文: 在变量面前加上有意义的前缀,程序员就能一眼看出变量的类型及相应的语义.这就是“匈牙利命名法”的用处.还有一些地方不适合用“匈牙利命名法”,比如,在一些强类型的语言(如C# ...

  8. Week 2

    第1章:概论1.原文“这些软件企业的商业模式有些事合情合理也合法:有些看似合情合理,但不怎么合法:有些做法不合 理,但是还没有出台相关的法律.在相关法律完善之前,软件行业还有一个行规,即应该有职业道德 ...

  9. Mac 下搭建 Apache 服务器

    Apache作为最流行的Web服务器端软件之一,它的优点与地位不言而喻.下面介绍下在Mac下搭建Apache服务器的步骤: (1)“前往” –>”个人” (2)在你的个人目录下新建一个文件夹,改 ...

  10. Express搭建NodeJS项目

    1.安装Node.js: 2.安装npm; 3.安装Express; 在本例中默认全局安装express 安装express生成器 如果没有安装express-generator或安装路径不对,会报以 ...