在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. Pandas字符串操作及实例应用

    字符串操作 字符串对象方法 val = 'a,b, guido' val.split(',') ['a', 'b', ' guido'] pieces = [x.strip() for x in va ...

  2. geckodriver问题

    selenium.common.exceptions.WebDriverException: Message: Service geckodriver unexpectedly exited. Sta ...

  3. 整合Spring框架和MyBatis框架

    ------------------------siwuxie095                                 整合 Spring 框架和 MyBatis 框架         ...

  4. 每10秒执行定时任务-crontab

    * * * * * /data/crontab.sh * * * * * sleep 10; /data/crontab.sh * * * * * sleep 20; /data/crontab.sh ...

  5. vue 前端框架 目录

    vue 前端框架 目录   vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...

  6. React-router4 第九篇 Ambiguous Matches 模糊匹配

    https://reacttraining.com/react-router/web/example/ambiguous-matches 看了官方的例子,我准备把阮一峰老师的代码再粘贴一次..!!

  7. 一 分析easyswoole源码（启动服务）

    分析easyswoole源码 1以启动为例 //检查是否已经安装 installCheck();//检查锁文件是否存在,不存在结束 //启动服务 serverStart showLogo();//显示 ...

  8. 可遇不可求的Question之error: Failed dependencies: MySQLconflicts 错误篇

    error: Failed dependencies: MySQLconflicts   错误提示: error: Failed dependencies:                       ...

  9. 卷积在深度学习中的作用（转自http://timdettmers.com/2015/03/26/convolution-deep-learning/）

    卷积可能是现在深入学习中最重要的概念.卷积网络和卷积网络将深度学习推向了几乎所有机器学习任务的最前沿.但是,卷积如此强大呢?它是如何工作的?在这篇博客文章中,我将解释卷积并将其与其他概念联系起来,以帮 ...

  10. ESP32作为接入点AP

    作为接入点的第一个任务是使用esp_wifi_set_mode()函数设置ESP32 函数并传递请求,作为接入点,可以把ESP32设置为AP或者APSTA,即 esp_wifi_set_mode(WI ...