码迷,mamicode.com
首页 > Web开发 > 详细

CSS3中 E:nth-child(n) VS E:nth-of-type(n)

时间:2015-04-24 14:10:54      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:

一直不太明白 E:nth-child(n)和E:nth-of-type(n)的区别。今天花时间研究了一下,终于知道了它们之间的相同点和差异点。总结如下,以防时间长了,忘记了

  • 都是从E的父元素往下看,且n都是从1开始的
  • 但E:nth-child(n)选择的是第n个子元素,且类型为E
  • 而E:nth-of-type(n)选择的是所有类型为E的元素中的第n个

有点绕,举个例子先。我先定义用于测试的HMTL

<div>
    <p>aaaa</p>
    <h3>bbbbb</h3>
    <p>ccccc</p>
    <h3>ddddd</h3>
</div>

测试E:nth-child(n),相关的CSS如下:

h3:nth-child(1){
    background-color:#00ff90; //不选择任何元素,因为第一个子元素是p,不是h3
}
h3:nth-child(2){
    background-color:#00ff90; //选择bbbbb
}

 

测试E:nth-of-type(n),相关的CSS如下:

h3:nth-of-type(1){
    background-color:#00ff90; //选择bbbbb
}
h3:nth-of-type(2){
    background-color:#00ff90; //选择ddddd
}

 

CSS3中 E:nth-child(n) VS E:nth-of-type(n)

标签:

原文地址:http://www.cnblogs.com/princeding/p/4453208.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!