CSS3选择器:nth-child和:nth-of-type之间的差异

:nth-child和:nth-of-type之间的差异

直接看实例:

<section>
    <div>我是一个普通的div标签</div>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

效果:一致,第二个p标签的文字变成了红色

<section>
    <div>我是一个普通的div标签</div>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

 效果:不一致,p:nth-child(2)悲剧了，其渲染的结果不是第二个p标签文字变红，而是第一个p标签，也就是父标签的第二个子元素。p:nth-of-type(2)的表现显得很坚挺，其把希望渲染的第二个p标签染红了

 

对于 p:nth-child(2) 表示这个元素要是 p 标签，且是第二个子元素，是两个必须满足的条件。于是，就是第一个 p 标签颜色为红色（正好符合：p标签，第二个子元素）。如果在 div 标签后面再插入个 span 标签，

<section>
    <div>我是一个普通的div标签</div>
    <span>我是一个普通的span标签</span>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

 那么p:nth-child(2)将不会选择任何元素。

 而p:nth-of-type(2)表示父标签下的第二个p元素，显然，无论在div标签后面再插入个span标签，还是h1标签，都是第二个p标签中的文字变红。

 

转载于:https://www.cnblogs.com/NatChen/p/8241604.html