详解CSS3中nth-child与nth-of-type的区别


Posted in HTML / CSS onJanuary 05, 2017

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>

结果如下:

详解CSS3中nth-child与nth-of-type的区别

上面这个例子,.demo li:nth-child(2)选择的是<li>one</li>节点,而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。

但是如果在nth-child和 nth-of-type前不指定标签呢?

.demo :nth-child(2){
color: #ff0000;
}
.demo :nth-of-type(2){
color: #00ff00;
}

这样又会是什么结果呢,看下html结构:

<ul class="demo">
<p>first p</p>
<li>first li</li>
<li>second li</li>
<p>second p</p>
</ul>

结果:

详解CSS3中nth-child与nth-of-type的区别

如上可见,在他们之前不指定标签类型,: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 元素指定两种不同的背景色:

p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}

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

使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色:

p:nth-of-type(3n+0)
{
background:#ff0000;
}

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

总结

以上就是关于css3中nth-child和 nth-of-type区别的全部内容了,希望本文的内容对大家学习或者使用CSS3能有一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 #HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 #HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 #HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 #HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 #HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 #HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 #HTML / CSS
You might like
php empty函数 使用说明
2009/08/10 PHP
PHP面向对象概念
2011/11/06 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
javascript读取xml
2006/11/04 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
python如何制作英文字典
2019/06/25 Python
python opencv如何实现图片绘制
2020/01/19 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
什么是Rollback Segment
2013/04/22 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
自荐信的两点禁忌
2013/10/30 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技