关于: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. php生成图片缩略图,支持png透明

    注:此功能依赖GD2图形库 PHP生成缩略图类   <?php /* * desc: Resize Image(png, jpg, gif) * author: 十年后的卢哥哥(http://w ...

  2. java 从数据删除指定值

    public class ArrayRemoveValue { public static void main(String[] args) { Integer[] _IntArray = new I ...

  3. Jquery做全选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Haskell 参考资料

    1.Haskell 中文社区:www.haskellcn.org 2.Haskell   官网:     www.haskell.org 3.Haskell   函数查询:www.haskell.or ...

  5. math and date、ajax、画布

    console.log(Math.PI);//圆周率 console.log(Math.sqrt(4));//平方根2 console.log(Math.abs(-2.3));//绝对值2.3 con ...

  6. DotNetBar for Windows Forms 12.9.0.0_冰河之刃重打包版及制作Visual Studio C#项目模板文件详解

    关于 DotNetBar for Windows Forms 12.9.0.0_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...

  7. linux查看系统命令

    [root@server ~] # uname –a                       # 查看内核/操作系统/CPU信息的linux系统信息命令 [root@server ~] # hea ...

  8. 使用Mulesoft建立webservice, simple方式,POJO

    Mulesoft是使用CXF来支持web service,有三种方式 1.JAX-WS 2.Simple, POJO 3. Proxy, pass-throught 本文介绍POJO,最简单的方式 1 ...

  9. RGB与16进制颜色转换的原理

    Integer有进制转换的方法.也可以自己写进制转换的方法.

  10. C# FTP/SFTP文件传输控件FTP for .NET/.NET CF 详细介绍

    FTP for .NET将FTP客户端功能添加到您的应用程序之中..NET控件的FTP支持所有常用的FTP服务器以及代理服务器,包括可扩展的目录解析.同步以及异步操作.主动与被动模式.以VB.NET与 ...