一、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. Java 内存模型_2

    title: Java 内存模型_2 date: 2017-01-28 02:04:06 tags: [JMM] categories: [Programming,Java] --- Why 理解 J ...

  2. PHP性能分析工具xdebug+qcachegrind

    先安装xdebug工具 pecl install xdebug 修改php.ini配置 [xdebug] zend_extension="xdebug.so" # profiler ...

  3. Kubernetes探索学习004--深入Kubernetes的Pod

    深入研究学习Pod 首先需要认识到Pod才是Kubernetes项目中最小的编排单位原子单位,凡是涉及到调度,网络,存储层面的,基本上都是Pod级别的!官方是用这样的语言来描述的: A Pod is ...

  4. R语言安装R package的2种方法

    http://www.cnblogs.com/emanlee/archive/2012/12/05/2803606.html

  5. java第二次实验报告20135231

    Java实验报告二:Java面向对象程序设计 20135231 何佳 实验要求: 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉 ...

  6. Codeforces Round #157 (Div. 1) B. Little Elephant and Elections 数位dp+搜索

    题目链接: http://codeforces.com/problemset/problem/258/B B. Little Elephant and Elections time limit per ...

  7. The North American Invitational Programming Contest 2017 题目

    NAIPC 2017 Yin and Yang Stones 75.39% 1000ms 262144K   A mysterious circular arrangement of black st ...

  8. python学习笔记05：贪吃蛇游戏代码

    贪吃蛇游戏截图: 首先安装pygame,可以使用pip安装pygame: pip install pygame 运行以下代码即可: #!/usr/bin/env python import pygam ...

  9. 今年暑假要AC

    今年暑假要AC 在这个大学的第一个的暑假,谁不想回去high呢~ 但是,这是不行的,还没有AC,你能回去吗?高三那年的暑假怎么玩的,现在补回来吧...有规模有计划有氛围的学习就是:优点多效率好激情足~ ...

  10. lintcode-517-丑数

    517-丑数 写一个程序来检测一个整数是不是丑数. 丑数的定义是,只包含质因子 2, 3, 5 的正整数.比如 6, 8 就是丑数,但是 14 不是丑数以为他包含了质因子 7. 注意事项 可以认为 1 ...