CSS3中:nth-child和:nth-of-type的区别深入理解


Posted in HTML / CSS onMarch 10, 2014

关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些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,若不是,则选择失败。

这里附上一个小例子:

复制代码
代码如下:

<div>
<ul class="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</div>

上面这个例子,.demo li:nth-child(2)选择的是<li>one</li>节点,而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。
HTML / CSS 相关文章推荐
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 #HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 #HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 #HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 #HTML / CSS
css3隔行变换色实现示例
Feb 19 #HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 #HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 #HTML / CSS
You might like
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
Vue实现active点击切换方法
2018/03/16 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
让 python 命令行也可以自动补全
2014/11/30 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
详解python中的hashlib模块的使用
2019/04/22 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
详解Python中import机制
2020/09/11 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
党员学习十八大感想
2014/01/17 职场文书
党员自我对照检查材料
2014/08/19 职场文书
远程教育培训心得体会
2016/01/09 职场文书
安全教育培训心得体会
2016/01/15 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书