详解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 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 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
如何做到多笔资料的同步
2006/10/09 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php rsa加密解密使用详解
2015/01/14 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
PyCharm设置护眼背景色的方法
2018/10/29 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Django的models中on_delete参数详解
2019/07/16 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
python实现经典排序算法的示例代码
2021/02/07 Python
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
员工辞职信范文大全
2015/05/12 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python