css选择器nth-child和nth-of-type区别

首先

<body>
    <div id="box1">
        <em id="em1">1111</em>
    </div>
    <em id="em2">2222</em>
    <div id="box2">
        <em id="em3">3333</em>
        <em id="em4">4444</em>
    </div>
</body>

在这里插入图片描述


nth-child

<style>
    em:nth-child(1) {
        color: red;
    }
</style>
  1. nth-child会寻找所有em的父元素的所有子元素进行划区。
  2. em1父元素是box1这个div,它的所有子元素就一个em,圈起来。
  3. em2父元素是body,所有子元素依次是box1、em、box2。
  4. em3和em4父元素都是box2,是同一个区域,所有子元素就是两个em。

在这里插入图片描述

结果:

  1. 三个区域找nth-child(n)里面找第n个元素,然后检查是不是em,是的话就生效,不是就不生效
  2. n为1时,第一个区域就一个em1,生效
  3. 第二个区域第一个元素为div不是em2,失效
  4. 第三个区域第一个元素是em3,生效
    在这里插入图片描述

如果n为2的话就是em2和em4生效了,你可以根据上面的方法推断出来吗?

nth-of-type

<style>
    em:nth-of-type(1) {
        color: red;
    }
</style>

结果:

1.还是同样的划区方法,不过,会剔除所有区域中不是em的元素,这就是区别。
2.区域1和3还是一样的,区域2剔除了box1和box2,区域里只剩下一个em2,n为1时被选中。
在这里插入图片描述

如果n取2时,只有em4被选中噢

nth-child如果前面不添加筛选查找元素

  1. 不推荐这么使用,筛选范围太泛了。
  2. 我们上文是使用em:nth-child(n),如果不添加em,也就是会将所有区域划分且没有限制元素是什么了,只要是第n个就添加样式。

例:

  1. 首先我们还是将内容限制在body,否则会从html整个根元素开始划分,注意中间有空格,因此查找元素不是body。
  2. 而且用body来划分,区域就是body底下所有区域,这里还是我们原来的三个区域,比较好理解。
  3. 第一个区域和第三个区域还是跟原来一样。
  4. 区别就是第二个区域第一个元素是box1,这次没有限制必须是em了,所以样式生效。
<style>
    body :nth-child(1) {
        color: red;
    }
</style>

虽然还是em1和em3变成红色,但是我们可以检查元素发现,box1也被添加上了样式:
在这里插入图片描述
可以回头再试试em:nth-child(n)的话会发现box1是不会被添加的。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

在下月亮有何贵干

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

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

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

打赏作者

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

抵扣说明:

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

余额充值