关于: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. how to get soul shields in blade and soul

    These soul shields can either be obtained by E.Fleet Supply Chain or Blackram Supply Chain (4-man or ...

  2. cacti结合nagios

    使用系统ubuntu12.0.45 监控软件,cacti 使用的是源码安装系统自带的版本过低需要添加插件 nagios采用的系统自带版本 安装nagios apt-get install nagios ...

  3. 日常小测:颜色 && Hackerrank Unique_colors

    题目传送门:https://www.hackerrank.com/challenges/unique-colors 感谢hzq大神找来的这道题. 考虑点分治(毕竟是路经统计),对于每一个颜色,它的贡献 ...

  4. Android中的DrawerLayout

    简介 Drawerlayout是google自带的控件,功能类似开源的SlidingMenu,在support-v4包下用来替代SlidingMenu(google好无耻啊). 使用方法 在activ ...

  5. Homebrew安装及使用

    简介 Homebrew官网:http://brew.sh/index_zh-cn.html Homebrew是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件,相当于linux ...

  6. S3C6410开发板开发环境的搭建

    本节主要介绍了S3C6410开发板及OK6410开发板.OK6410开发板是基于ARM11处理器的S3C6410,采用“核心版+底板”结构 主要步骤如下:. OK6410开发板自带一个串口,PC也需要 ...

  7. sja1000T can相关的知识

    开发环境:硬件环境arm9200 sja1000T,软件环境kernel version 2.6.21.驱动程序:字符驱动 can有两种基本的工作模式:basic can .pelican,pelic ...

  8. win8没有无线网络适配器问题

    1. 先关闭ssid : 命令提示符(管理员)输入 :netsh wlan set hostednetwork mde=disallow ssid 2. 再设置无线名称和密码 :netsh wlan ...

  9. 一次线上http接口调用不通相关的解决过程

    2016-05-25 08:58:34 昨天线上小白系统因为调用外部http接口,超时不释放,导致页面反应很慢,时间一长,报502错误. 上网查了下,502错误是因为服务对于客户的请求没有得到及时的反 ...

  10. [转]Objective-c中@interface、@implementation、@protocal

    原处:http://blog.csdn.net/l271640625/article/details/8393531 以下Objective-c简称OC 从事java开发的程序员们都知道,在java中 ...