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动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
HTML中的表单Form实现居中效果
May 25 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
js版本A*寻路算法
2006/12/22 Javascript
javascript中对对层的控制
2006/12/29 Javascript
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
pandas的qcut()方法详解
2019/07/06 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
企业军训感想
2014/02/07 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python
Android中的Launch Mode详情
2022/06/05 Java/Android