关于: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>节点。

CSS3中:nth-child和:nth-of-type的区别深入理解。 关于:nth-child和:nth-of-type的区别之前一直没太注意,经深入理解才发现里面其实暗藏玄机的更多相关文章

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

    关于:nth-child和:nth-of-type的区别之前一直没太注意.最近打算深入了解一些CSS3,才发现里面其实暗藏玄机. :nth-child可以选择父元素下的字元素,:nth-of-type ...

  2. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  3. CSS和CSS3中的伪元素和伪类(总结)

    好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...

  4. 不可不看!CSS3中三十一种选择器用法

    原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...

  5. img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

    img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...

  6. css3中transition和animation的回调处理

    弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬_┬)看来还是要再接再励啊w(゚Д゚)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...

  7. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  8. html5 css3中的一些笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title> ...

  9. css3 中的transition和transform

    我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...

随机推荐

  1. 微信开发订阅号(ASP.NET MVC4+jquery mobile+AppHarbor发布)

    首先应该去微信公众平台注册一个账号,因为我是用的个人,所以只能注册订阅号,然后需要提供身份证照片,这些大家慢慢折腾.然后在微信管理面板中选择高级功能,进入开发者模式. 在服务器配置中需要提供最重要的u ...

  2. LeetCode 4 Median of Two Sorted Arrays 查找中位数,排除法,问题拓展 难度:1

    思路:设现在可用区间在nums1是[s1,t1),nums2:[s2,t2) 1.当一个数组可用区间为0的时候,由于另一个数组是已经排过序的,所以直接可得 当要取的是最小值或最大值时,也直接可得 2. ...

  3. 【 2013 Multi-University Training Contest 4 】

    HDU 4632 Palindrome subsequence dp[x][y]表示区间[x,y]构成回文串的方案数. 若str[x]==str[y],dp[x][y]=dp[x+1][y]+dp[x ...

  4. Coding源码学习第一部分(AppDelegate.m)

    前言:在此首先感谢开源,感谢大神们的无私分享. Coding 的主页:https://coding.net/app#app-feature Coding 自己家的仓库:https://coding.n ...

  5. ICEM(2)—机翼翼稍网格绘制

    有时我们需要观察翼尖涡,这就需要将机翼全部被网格包围.但是网上比较多的教程都是机翼边缘即为网格边缘,机翼位于网格内部的不多.若是直接将网格拉伸,则会产生结构和非结构网格交错的情况.下面是绘制步骤 1. ...

  6. git入门学习

    初步学习笔记. 1.创建仓库:git init 仓库:个人理解为文件存放及版本追踪的容器,对应着一个目录,目录中包含用户的文件及git用来追踪文件版本的一系列文件. 新建并进入HelloWorld目录 ...

  7. 多线程的学习与python实现

    学习了进程与线程,现对自己的学习进行记录. 目录: 一.进程与线程的概念,以及联系与区别 二.多线程 三.python中多线程的应用 四.python实例 五.参考文献 一.进程与线程的概念.以及联系 ...

  8. C++多线程3

    #include "stdafx.h" #include <windows.h> #include <process.h> int g_count; ; u ...

  9. Python异常总结(出处: 鱼C论坛)

    Python 标准异常总结http://bbs.fishc.com/thread-45814-1-1.html(出处: 鱼C论坛) Python标准异常总结AssertionError    断言语句 ...

  10. Three.js入门

    一.前段时候花了些功夫研究了下WebGL,了解了基本实体的实现原理和实现方法,现在回忆就只记得如果要我画个圆形,怀疑都要了我的命(那得画多少个三角形...).功夫不负有心人,今天学习Three.js得 ...