nth-child和nth-of-type

最新推荐文章于 2022-11-10 07:11:27 发布

qq_40660257

最新推荐文章于 2022-11-10 07:11:27 发布

阅读量213

点赞数

分类专栏： CSS3选择器文章标签： nth-child nth-of-type

本文链接：https://blog.csdn.net/qq_40660257/article/details/81223219

版权

CSS3选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习CSS的过程中，确实没有遇见过太大的问题，唯独CSS3中的这两个伪类选择器，看的我真的是一脸懵逼。刚开始以为很简单，没太细看，后来在实际使用的过程中，发现自己对他们根本是一知半解。每次想使用的时候都要查找相应的文档、博客之类的，我又实在是个怕麻烦的人，干脆一次性把它搞懂，因为有了我的第一篇博客。毕竟是第一次写，有错误欢迎大家批评指正，还有排版之类的，以后肯定会越来越好的，哈哈哈。

W3C对于这两个选择器的定义是这样的：

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

上述的定义和概念对于我自己来说是似懂非懂的，没办法，要想彻底弄懂，只有实践出真知。

分为以下几种情况考虑：

一、未指定选择器的类型时

:nth-child(n)

<body>
    <div class="box">
        <p>p1</p>
        <p>p2</p>
        <div>div1</div>
        <div>div2</div>
        <article>article1</article>
        <article>article2</article>
        <ul>
            <li>ul中的li标签</li>
        </ul>
        <div>div3</div>
        <div>div4</div>
        <div>div5</div>
        <p>
            <span>p标签里面的span标签</span>
        </p>
        <span>span</span>
    </div>
</body>

样式：

<style>
        .box div,p,article {
            border: 1px solid #008000;
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
        }
        .box :nth-child(2){
            background: green;
        }
    </style>

结果如下：可以看出，选中的是第二个元素p2。

结论：nth-child(n)在未指定类型时，选中的是父元素下的第n个子元素。

:nth-of-type(n)

<div class="box">
        <p>p1</p>
        <p>p2</p>
        <div>div1</div>
        <div>div2</div>
        <article>article1</article>
        <article>article2</article>
        <ul>
            <li>ul中的li标签1</li>
        </ul>
        <div>div3</div>
        <div>div4</div>
        <div>div5</div>
        <ul>
            <li>ul中的li标签2</li>
        </ul>
        <p>
            <span>p标签里面的span标签</span>
        </p>
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
    </div>

样式：

<style>
        .box div,p,article {
            border: 1px solid #008000;
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
        }
        .box :nth-of-type(2){
            background: green;
        }
</style>

结果如下，可以看出，选中的是父元素下每个标签中的第二个。

这里写图片描述

结论：nth-of-type(n)在未指定类型时，选中的是父元素下的每个标签的第n个。

二、指定选择器的类型时

selector:nth-child(n)

<body>
    <div class="box">
        <p>p1</p>
        <p>p2</p>
        <div>div1</div>
        <div>div2</div>
        <article>article1</article>
        <article>article2</article>
        <ul>
            <li>ul中的li标签1</li>
        </ul>
        <div>div3</div>
        <div>div4</div>
        <div>div5</div>
        <ul>
            <li>ul中的li标签2</li>
        </ul>
        <p>
            <span>p标签里面的span标签</span>
        </p>
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
    </div>
</body>

样式：

<style>
        .box div,p,article {
            border: 1px solid #008000;
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
        }
        .box div:nth-child(2){
            background: green;
        }
        .box div:nth-child(3){
            background: red;
        }
    </style>

结果如下：可以看出，div:nth-child(2)没有选中的任何元素，div:nth-child(3)则选中了box的第三个子元素，并且这个子元素是div。

这里写图片描述

结论：selector:nth-child(n)选中的是父元素下的第n个子元素，并且要求这个元素是selector。本例中selector为div。

selector:nth-of-type(n)

<body>
    <div class="box">
        <p>p1</p>
        <p>p2</p>
        <div>div1</div>
        <div>div2</div>
        <p>p3</p>
        <article>article1</article>
        <article>article2</article>
        <ul>
            <li>ul中的li标签1</li>
        </ul>
        <div>div3</div>
        <div>div4</div>
        <div>div5</div>
        <ul>
            <li>ul中的li标签2</li>
        </ul>
        <p>
            <span>p标签里面的span标签</span>
        </p>
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
    </div>
</body>

样式：

<style>
        .box div,p,article {
            border: 1px solid #008000;
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
        }
        .box div:nth-of-type(2){
            background: green;
        }
        .box p:nth-of-type(3){
            background: red;
        }
</style>