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之多背景background使用示例
Oct 18 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
简单实现PHP留言板功能
2016/12/21 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
基于python3生成标签云代码解析
2020/02/18 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Python实现简单猜数字游戏
2021/02/03 Python
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
专升本个人自我评价
2013/12/22 职场文书
给实习单位的感谢信
2014/02/01 职场文书
大专学生求职自荐信
2014/07/06 职场文书
地陪导游欢迎词
2015/01/26 职场文书
大学生入党群众意见书
2015/06/02 职场文书
辩护意见书
2015/06/04 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js