一、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. gcc 与 g++的区分较

    一:gcc与g++比较 误区一:gcc只能编译c代码,g++只能编译c++代码两者都可以,但是请注意:1.后缀为.c的,gcc把它当作是C程序,而g++当作是c++程序:后缀为.cpp的,两者都会认为 ...

  2. 面向 Web 开发者的 Sublime Text 插件

    Package Control 在 Sublime Text 上大家都用 Package Control 来管理安装插件,所以它是我们要安装的第一个插件,安装方法见这里.关于 Package Cont ...

  3. unset命令详解

    基础命令学习目录首页 功能说明:unset是一个内建的Unix shell命令,在Bourne shell家族(sh.ksh.bash等)和C shell家族(csh.tcsh等)都有实现.它可以取消 ...

  4. Python20 - Day08

    异常处理 一.什么是异常? 异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理他,则会抛出该异常,程序的运行也会停止) 错误分成两种: 1.语法错误 2.逻辑错误 二 ...

  5. Python基础_异常处理与跟踪

    异常的种类 AttributeError 试图访问一个对象没有的树形,比如foo.x,但是foo没有属性x IOError 输入/输出异常:基本上是无法打开文件 ImportError 无法引入模块或 ...

  6. CocoaPods pod install的时候报错：invalid byte sequence in UTF-8 (ArgumentError)解决办法

    CocoaPods pod install的时候报错:invalid byte sequence in UTF-8 (ArgumentError)解决办法: 基本可以确定是Podfile中的内容编码有 ...

  7. 一次ajax调用，发送了两次请求（一次为请求方法为option，一次为正常请求）

    在项目了开发时遇见一个奇怪的现象,就是我在js里面发送一次ajax请求,在浏览器network那边查询到的却是发送了两次请求,第一次的Request Method参数为OPTIONS,第二次的Requ ...

  8. 20145214 《网络对抗技术》 MSF基础应用

    20145214 <网络对抗技术> MSF基础应用 1.实验后回答问题--用自己的话解释什么是exploit,payload,encode 如果把MSF比作一把枪的话,payload应该是 ...

  9. android实战开发02

    正如我之前提到的,我想的是网页来进行测试发布是有较大难度的,但是我高兴的看到我的好友limary已经熬出头了,之后我会关注他的进度的,感谢他给我的鼓励和启发.现在我要讲讲我的天才运算器V2.0版. 在 ...

  10. Mevan(转)

    Missing artifact com.oracle:ojdbc6:jar:11.2.0.1.0问题解决 ojdbc包pom.xml出错 置顶 2017年08月23日 10:55:25 阅读数:96 ...