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

一直不太明白 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
}

 

转载于:https://www.cnblogs.com/princeding/p/4453208.html