CSS3中 E:nth-child(n) VS E:nth-of-type(n)
浏览数：50 /
时间：2015年06月09日
一直不太明白 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
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
