在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？

其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，
而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
文字未免听起来比较晦涩，便于理解，这里附上一个小例子： 
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>demo</title>

</head>

<style>

  .demo li:nth-child(2) {

    color: #ff0000;

  }

  .demo li:nth-of-type(2) {

    color: #00ff00;

  }

</style>

<body>

<div>

  <ul class="demo">

    <p>zero</p>

    <li>one</li>

    <li>two</li>

  </ul>

</div>

</body>

</html>
结果如下：
上面这个例子，.demo li:nth-child(2)选择的是<li>one</li>节点，而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。
但是如果在nth-child和 nth-of-type前不指定标签呢？
<style>

  .demo :nth-child(2) {

    color: #ff0000;

  }

  .demo :nth-of-type(2) {

    color: #00ff00;

  }

</style>

这样又会是什么结果呢，看下html结构：

<ul class="demo">

  <p>first p</p>

  <li>first li</li>

  <li>second li</li>

  <p>second p</p>

</ul>

结果：

如上可见，在他们之前不指定标签类型，：nth-child(2) 选中依旧是第二个元素，无论它是什么标签。而 :nth-type-of(2) 选中了两个元素，分别是父级.demo中的第二个p标签和第二个li标签，由此可见，不指定标签类型时，:nth-type-of(2)会选中所有类型标签的第二个。

我们已经了解了nth-child和 nth-of-type的基本使用与区别，那么更进一步nth-of-type(n)与nth-child(n)中的n是什么呢？

nth-of-type(n)与nth-child(n)中的n可以是数字、关键词或公式。

数字：也就是上面例子的使用，就不做赘述。
关键词：Odd 、even
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词
注意：第一个子元素的下标是 1
在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：
<style>

  p:nth-of-type(odd) {

    background: #ff0000;

  }

  p:nth-of-type(even) {

    background: #0000ff;

  }

</style>

公式：或者说是算术表达式

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

<style>

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

    background: #ff0000;

  }

</style>

若是 :nth-of-type(4n+2) 就是选择下标是4的倍数加上2的所有元素

深入理解css3中 nth-child 和 nth-of-type 的区别的更多相关文章

  1. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  2. 深入理解css3中的线性渐变

    css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, & ...

  3. 深入理解css3中nth-child和 nth-of-type的区别

    在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...

  4. 深入理解css3中的flex-grow、flex-shrink、flex-basis

    https://www.cnblogs.com/ghfjj/p/6529733.html

  5. 简单理解java中timer的schedule和scheduleAtFixedRate方法的区别

    timer的schedule和scheduleAtFixedRate方法一般情况下是没什么区别的,只在某个情况出现时会有区别--当前任务没有来得及完成下次任务又交到手上. 我们来举个例子: 暑假到了老 ...

  6. linux 命令中的find locate whereis which type 使用区别

    find 最强大,但参数也较多,需指定查找目录,如 find / -name “filename” locate 是一个快速查找命令,有预先索引好的数据库,由于数据库是定时更新,因此,结果上可能会有迟 ...

  7. 初识 css3中counter属性

    最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...

  8. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  9. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

随机推荐

  1. 在网站中使用UEditor富文本编辑器

    UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点. 官网链接 进入到下载页面,选择相应的版本下载 这里我们使用ASP.NET开发,所以选择 ...

  2. VueJs相关命令

    参考: https://www.jianshu.com/p/1626b8643676   安装axios $ npm install axios   如何打包 基于Vue-Cli,通过npm run ...

  3. 450. Delete Node in a BST 删除bst中的一个节点

    ［抄题］: Given a root node reference of a BST and a key, delete the node with the given key in the BST. ...

  4. MySQL往表里插入千条数据 存储过程

    工作中遇到的问题,先记录一下,方便以后查看 存在两张表,user表和friend表 user表部分字段,如上图 friend表部分字段,如上图 往friend表插入千条数据,friend表中的user ...

  5. Python开发——基础

    注释 单行注释 # 被注释的内容 多行注释 """ 被注释的内容 """ 解释器路径 #!/usr/bin/env python # 用于L ...

  6. ramfs的两种制作方法

    制作方法1 1  准备一个已经可以使用的文件系统,假设目录为/rootfsLinux内核需要支持ext2文件系统及ramdisk支持(fs相应的选项要勾上)2 在pc上制作ramdisk镜像(1)dd ...

  7. python02 运算符,基本数据类型,整型,字符串

    1.python开发IDE pycharm,python编写工具,, #专业版 #不需要汉化 注册码问题解决 https://www.cnblogs.com/evlon/p/4934705.html整 ...

  8. 数据库-SQL语句：删除和修改语句-列类型-列约束

    使用MySQL客户端连接服务器的两种方式: (1)交互模式: ——查 mysql.exe  -h127.0.0.1  -uroot  -p mysql   -uroot (2)脚本模式:——增删改 m ...

  9. 【部署问题】解决Nginx: [error] open() ＂/usr/local/Nginx/logs/Nginx.pid" failed（2:No such file or directory）

    问题:环境问题 解决方法: /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 使用nginx -c的参数指定nginx.c ...

  10. EntityFramWork(3 code First 约定)

      Code First 约定 借助 Code First,可通过使用 C# 或 Visual Basic .NET 类来描述模型.模型的基本形状可通过约定来检测.约定是规则集,用于在使用 Code ...