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

作用:

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的第一个子标签为 <p>p1</p>

    div的第一个子标签为<p>p3</p>

    id="span1"的span标签的第一个子标签为<p>p4</p>

    id="span2"的span标签的第一个子标签为<p>p5</p>

    li标签的第一个子标签为<span>span4</span>

最后,我们可以知道除了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时,谁的背景颜色会变绿?

答:标签<p>p8</p>变绿

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

歪比巴啵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值