结构伪类选择器之E:nth-child(n){}

最新推荐文章于 2023-04-20 16:27:30 发布

歪比巴啵

最新推荐文章于 2023-04-20 16:27:30 发布

阅读量341

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_40254169/article/details/118033271

版权

作用：

E:nth-child(n)表示定位E的父元素的某些特定子元素

说人话，就是：

step1：找到所有E类型的标签

step2：找到所有E类型标签的父标签【注意，通俗的说父标签就是上一级标签，如果再上一级就是爷标签，咱们不找这个】

<div>
    <span>
        <p>making paper copies of everything</p>
    </span>
</div>

【以上面这段代码为例，如果E=p，span标签是p标签的父标签，也就是我们要找的，div我们目前不管】

step3：根据n的值，咱们找到【所有父标签】的【第n个子标签】，

如果这些第n个子标签有和E类型一致的，那么对该标签进行相应操作；

不和E类型一致的那些第n个子标签，咱们不做处理。

具体实例

为不失一般性，我这里多给出了几种类型的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>

    <style>
        p:nth-child(1){
            background: green;
        }
    </style>

</head>

<body>
<p>p1</p>
<span>span1</span>
<p>p2</p>
<div>
    <p>p3</p>
    <span id="span1">
        span2:<p>p4</p>
    </span>
    <span id="span2">
        span3:<p>p5</p>
    </span>
    <p>p6</p>
</div>
<ol>
    <li>
        <span>span4</span>
        <p>p7</p>
    </li>
</ol>
<p>p8</p>
</body>

</html>

注意到：

p:nth-child(1){
    background: green;
}

按照开头给出的step进行操作【这里即是E=p，很好理解】

step1：找出所有的p标签【难度：0颗星】

step2：找出所有p标签的父标签【难度：1颗星】

p1 p2 p8 的父标签为body

p3 p6 的父标签为div

p4 的父标签为id="span1"的span标签

p5 的父标签为id="span2"的span标签

p7 的父标签为li标签

step3：在各个父标签下，找出其第1个子标签【这里是因为p:nth-child(1)中的括号内的数字为1，即n=1】

那么根据step2找出的信息，

body的第一个子标签为 p1

div的第一个子标签为p3

id="span1"的span标签的第一个子标签为p4

id="span2"的span标签的第一个子标签为p5

li标签的第一个子标签为span4

最后，我们可以知道除了li的第一个子标签类型不是p标签类型，step3中找出的其他所有标签都满足p标签类型这一要求，因此将这些标签的北京颜色置为绿色。

补充：

E:nth-child(n)中的n为正整数，

除了直接为其赋值，如1 2 3 等这类正整数；

也可以赋值式子，如n+1 n-3等，n是正整数，显然，当n+1 n-3为正整数是才有意义

还可以赋值为odd even ，其中odd表示所有奇数，even表示所有偶数

练习：

p:nth-child(6){ background: green; }

当n=6时，谁的背景颜色会变绿？

答：标签p8变绿

歪比巴啵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
结构伪类选择器之E:nth-child(n){}

作用：E:nth-child(n)表示定位E的父元素的某些特定子元素说人话，就是：
复制链接

扫一扫

结构伪类选择器之E:nth-child(n){}

“相关推荐”对你有帮助么？