:nth-child()和:nth-of-type()

聊一下我对两位的误解。

网上给两位的定义是：

:nth-child(n)选择器

匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

:nth-of-type(n) 选择器

 匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。
提示：请参阅 :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。

我的误解

既然是匹配属于其父元素的第 N 个子元素,那我可否这样？

<style>
    .item:nth-child(1){
        color: yellow;
    }
</style>

<div>
    <p>这是个p</p>
    <h2>这是个h2</h2>
    <p href="">这是个p</p>
    <p href="" class="item">这是个p</p>
    <h2>这是个h2</h2>
    <p href="">这是个p</p>
</div>

通过item去选择第一个p标签，从语文角度，显然这是说的通的，这就是在匹配属于其父元素的第 N 个子元素。但结果却是无效。

怪异的地方

1、:nth-child可以通过item选择自己。

<style>
    /* 选择自己 */
    .item:nth-child(4){
        color: yellow;
    }
</style>

:nth-of-type()也有这种现象。

2、:nth-child通过自身选不到不同类的对象（这时就体现出nth-of-type的作用了）

<style>
     p:nth-child(2){
        color: yellow;
    }
</style>

<div>
    <p>这是个p</p>
    <h2>这是个h2</h2> //h2并不受影响
    <p href="">这是个p</p>
    <p href="" class="item">这是个p</p>
    <h2>这是个h2</h2>
    <p href="">这是个p</p>
</div>

确切的说，他们的用法应该是，以父元素下所有子元素（同类或不同类），为对象，自上而下遍历子元素。：
比如:nth-child的应用场景，应该是这样的：

适用于父元素下子元素全都是同类的，从第一个开始往后遍历
<style>
     p:nth-child(2){
        color: yellow;
    }
</style>

<div>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
</div>

:nth-of-type()则是适合在子元素类型混用时：

<style>
     p:nth-child(2){
        color: yellow;
    }
</style>

<div>
    <p>这是个p</p>
    <h2>这是个h2</h2> //h2并不受影响
    <p href="">这是个p</p>
    <p href="" class="item">这是个p</p>
    <h2>这是个h2</h2>
    <p href="">这是个p</p>
</div>

总的来说，他们都不能实现：通过自身，查找自己前面（上面）的兄弟元素(这也是为什么需要Js的原因)

• 本文作者： 本该如此
• 本文链接： https://anyway521.github.io/post/ddef631c.html
• 最后更新： 2021年02月01日 19:13:12
• 版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！

赞

赏杯Java？٩(๑^o^๑)۶

创作不易，感谢支持！