详解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+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
CSS list-style-type属性使用方法
May 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
js+css实现打字效果
2020/06/24 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python实现数独算法实例
2015/06/09 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
Python实现购物车购物小程序
2018/04/18 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
浅谈python中get pass用法
2019/03/19 Python
Python中函数参数匹配模型详解
2019/06/09 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
党员批评与自我批评发言材料
2014/10/14 职场文书
李强感恩观后感
2015/06/17 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang