在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. Java学习笔记（二十）：多态

    什么是多态 多态的好处 举个例子:需求:给饲养员提供一个喂养动物的方法,用于喂养动物 假如没有多态,会发现针对不同类型的动物,我们需要提供不同的feed方法来喂养,当需求变化时,比如增加动物,就要增加 ...

  2. java使用poi生成导出Excel（新）

    导出样式: java代码: import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStre ...

  3. [leetcode]2. Add Two Numbers两数相加

    You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...

  4. sbb指令

    sbb是带借位减法指令,它利用了CF位上记录的借位值. 指令格式:sbb 操作对象1,操作对象2 功能:操作对象1=操作对象1-操作对象2-CF 比如指令sbb ax,bx实现的功能是: (ax)=( ...

  5. JavaSE基础知识（1）—初识Java

    一.JAVA的背景 JAVA本身隶属的公司的是sun公司(创始公司) JAVA创始人:詹姆斯 高斯林 09年被oracle收购 JAVA的前身是Oak 二.JAVA的版本 95年 JAVA诞生96年 ...

  6. java ssh执行shell脚本

    1.添加依赖 com.jcraft:jsch ch.ethz.ganymed:ganymed-ssh2:262 2.获取连接 conn = new Connection(ip, port); conn ...

  7. elk kibana查询语法

    elk日志系统中kibana查询语法 单项term查询 例: 搜 Dahlen, Malone 字段field查询 field:value 例:city:Keyport, age:26 通配符 ? 匹 ...

  8. 杨其菊201771010134《面向对象程序设计（java)》第一周学习总结

    第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com 安迪儿 程序设计评测:https://pintia.cn/ 迷路的麋鹿回不来家了 代码 ...

  9. CentOS上部署.net core

    1.阿里云更换系统安装CentOS7.4 64位版本 2.试用XShell 5 登录服务器 参考https://www.microsoft.com/net/learn/get-started/linu ...

  10. 借助Algorithmia网站API：用AI给黑白照片上色，复现记忆中的旧时光

    先看DEMOhttps://demos.algorithmia.com/colorize-photos/ 了解ColorfulImageColorizationhttps://algorithmia. ...