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 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php统计文章排行示例
2014/03/04 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
浅谈PHP中的
2016/04/23 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
Python中用Spark模块的使用教程
2015/04/13 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
会计应聘求职信范文
2013/12/17 职场文书
村委会主任先进事迹
2014/01/15 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
关于保护环境的建议书
2014/08/26 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
倡议书格式及范文
2015/04/29 职场文书
谢师宴学生致辞
2015/07/27 职场文书
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android