结构伪类选择器中的nth-child(n)和nth-of-type(n)

最新推荐文章于 2024-08-26 16:48:02 发布

..儒

最新推荐文章于 2024-08-26 16:48:02 发布

阅读量435

点赞数 4

文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/2301_80092823/article/details/135930341

版权

nth-child(n) 选择父元素中的一个或多个子元素

n可以是数字，公式，关键字
n如果是数字，就是选择第n个
n可以是关键字：even偶数， odd奇数。
n可以是公式：变量只能写n（不能是其他字母），0或者超出的忽略。

公式	取值
2n	偶数（相当于even）
2n+1	奇数（相当于odd)
5n	五的倍数（5，15，10等）
n+2	从第二个开始，到最后（含二）
-n+3	前三个（包含三）

具体使用如下

    <style>
        ul li:nth-child(n+3) {
            background-color: antiquewhite;
        }

        ul li:nth-child(-n+2) {
            background-color: azure;
        }
    </style>

<body>
    <ul>
        <li>number1</li>
        <li>number2</li>
        <li>number3</li>
        <li>number4</li>
        <li>number5</li>
    </ul>

</body>

因为n是从0开始计数，n+3表示第3，4，5个（第六个超出ul范围为，故忽略不计)则最后效果为number3，4，5被改为azure背景颜色，-n+2表示第2，1个（第0个超出ul范围，故忽略不计）。

在结构包含单一的情况下，nth-of-type和nth-child(n)用法相似

但在实际开发中会出现更复杂的情况，例如ul中包含了li，divs，span，input等多个子元素

接下来将详细介绍两者之间的区别

在如下情况中，section中包含了p和div两类标签

    <style>
        section div:nth-child(1) {
            background-color: hotpink;
        }
    </style>

<body>
    <section>
        <p>different</p>
        <div>mean1</div>
        <div>mean2</div>
    </section>

运行的结果却是section中的背景颜色都没有变为hotpink

为什么会发生这种情况呢;那是因为nth-child会把所有的section下的子元素都排列序号，different为一号，mean1，mean2分别为二，三号但是执行的时候会看第一个子元素也就是different，然而different所在的<p>与伪类选择器中选中的<div>不匹配，就没有标签被选择出来，故都没有背景颜色。

当在伪类选择器中使用nth-of-type

    <style>
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>

<body>
    <section>
        <p>different</p>
        <div>mean1</div>
        <div>mean2</div>
    </section>

就会发现mean1所在的一行背景颜色变为blue，这是由于nth-of-type会把指定标签排列序号，如在上述情况中，选择器会先锁定<div>将mean1，mean2排序为1，2号，再从中选择第一个子元素，故mean1变为blue背景颜色。

二者区别总结

nth-child会先锁定第几个子元素，找到后在看和选择器前面写的标签是否一致。

nth-of-type会先锁定指定的标签（掠过其余标签）在看选择的第几个子元素。

如果是无序列表，nth-child(n)使用更多。

伪类选择器的权重

   
        section div:nth-of-type(1) {
            background-color: blue;
        }

在上面这行代码中，nth-of-type属于结构伪类选择器，权重是10，div属于元素选择器（标签选择器）权重是1，section也属于标签选择器权重是1，故整体的权重是12.

所以需要特别注意的是：类选择器，属性选择器，伪类选择器的权重为10.