一、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. git查看添加删除远程仓库

    查看远程仓库 git remote -v 删除远程仓库 git remote remove origin 添加远程仓库 git remote add origin 仓库地址 关联远程分支 重新关联远程 ...

  2. Geatpy遗传算法在曲线寻优上的初步探究

    园子里关于遗传算法的教案不少,但基于geatpy框架的并未多见,故分享此文以作参考,还望广大园友多多指教! Geatpy出自三所名校联合团队之手,是遗传算法领域的权威框架(python),其效率之高. ...

  3. Vue.js 相关知识（组件）

    1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...

  4. 测试效率 timeit cProfile

    timeit使用 def f1(lIn): l1 = sorted(lIn) # O(nlogn) C语言的 l2 = [i for i in l1 if i<0.5] # O(n) retur ...

  5. 浅谈jQuery构造函数

    $()函数到底做的什么 jQuery在前端领域路人皆知,对于一向喜欢玩js的博主来说,虽然能力有限,但是还是很喜欢研究他的做为.那么一个简单的美元符号$与一对常见的()括号,jQuery底层到底做了哪 ...

  6. Oracle和MySQL插入时获取主键

    这里只写selectKey方法的 一,Oracle数据库中的写法 order="BEFORE"因为oracle中需要先从序列获取值,然后将值作为主键插入到数据库中 <sele ...

  7. No.1010_第七次团队会议

    渺茫的前景 今天大家都很失望,一来昨天的问题还是继续存在着,仍然没有完成.二来,我们看了一下其余几个组的界面,对自己有些难过. 我们组确实存在人手少的问题,这几天我还因为挑战杯的事情缺席了两天,感觉内 ...

  8. iOS开发学习-资源打包

    图片是被放到Images.xcassets中 1.部署版本在>=iOS8的时候,打包的资源包中的图片会被放到Assets.car 图片被压缩: 2.部署版本在<iOS8的时候,打包的资源包 ...

  9. 初学Cocos2dx

    初学cocos2dx Cocos2dx 中的主要概念包括:应用.导演.场景.层.精灵.动画.动作. Cocos2dx里面的主要类 1.CCObject Object Object Object 是co ...

  10. 一个关于狗记录的Java练习

    package 狗场;import java.util.*;public class dogRoom { /** * 作者.范铭祥 * 狗场的狗体重查询问题 */ public static void ...