通俗辨析伪类选择器中child型与type型

辨析xxx-child和xxx-type⭐️

关键理解在于:针对的一组兄弟,是不是一个族群的。

  • 案例描述:
    • 有两个水果篮子
    • 一个水果篮子里面装着五个水果:一个桃子,一个橙子和三个苹果。
    • 另一个水果篮子里面只有一个水果:一个苹果。
    • 我们要根据选择器进行抓取水果(抓取水果相当于选择器选择,并与之样式化)

image-20230320003858291

child相关
  • apple:first-child
    • 果篮1:none
    • 果篮2:苹果1

E:first-child定义是:选择元素 E 所在的一组兄弟元素的第一个元素。

我们拆解一下

对于果篮1:

元素E为apple苹果,一组兄弟元素,就是水果篮子中装的五个水果

那么第一个元素就是桃子啦

但是桃子不是苹果,因此取出来是none

对于果篮2:

元素E为apple苹果,一组兄弟元素,就是果篮2中的苹果自己

那么第一个子元素就是苹果

  • orange: first-child
    • 果篮1:none
    • 果篮2:none

对于果篮1:

因为orange橙子位于果篮1,满足条件,在这个果篮中寻找第一个,即桃子。但是桃子不是橙子,不是我们要找的,因此不是。

对于果篮2:

orange不在果篮2中,没有继续的必要。

  • apple: nth-child(5)
    • 果篮1:苹果3
    • 果篮2:none

对于果篮1:

值得注意的是,我们规定下标从1开始

因为第5个元素是苹果3,苹果3属于苹果,因此满足题意,返回苹果。

对于果篮2:

5个元素都没有,无继续的必要。

  • apple:only-child
    • 果篮1:none
    • 果篮2:苹果1

对于果篮1:

apple所在的篮子中,水果不唯一,因此没有。

对于果篮2:

apple在果篮里,且是唯一,拿出。

举了这几个例子也不难发现,E:xxx-child无非要满足如下条件:

  1. 研究对象是E元素处于的群组中(E所在的水果篮子)
  2. 比较的范围是与E处于同一层级的所有元素(篮子里面所有水果)
  3. 比较范围中满足选择器描述条件的元素(如first-child就是比较范围中第一个元素,即水果篮子里面第一个元素)
  4. 该元素属于E(不仅满足选择条件,还要取出来是E)

给一个示例自己体会一下~

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
    on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title></title>
    <style>
        li,
        p {
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: #ccc;
            margin-right: 10px;
        }

        li:only-child {
            color: purple;
        }

        li:nth-child(2) {
            color: green;
        }

        li:nth-of-type(2) {
            color: blue;
        }

        li:nth-child(4) {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <p>1号p标签</p>
        <li>1号li标签</li>
        <p>2号p标签</p>
        <li>2号li标签</li>
        <li>3号li标签</li>
    </ul>
    <ul>
        <li>1号li标签</li>
    </ul>
</body>
</html>

image-20230319232537930

type相关

仍然以这个案例为例:

image-20230320003858291

  • apple:first-of-type
    • 果篮1:苹果1
    • 果篮2:苹果1

E:first-of-type定义是:选择元素 E 所在的一组兄弟元素的第一个E类型的元素。

我们拆解一下

对于果篮1:

元素E为apple苹果,一组兄弟元素,就是水果篮子中装的五个水果

第一个E类型的元素,是苹果1,因此取出来结果为苹果1

对于果篮2:

元素E为apple苹果,一组兄弟元素,第一个属于苹果的元素就是果篮2中的苹果1

  • apple:nth-of-type(2)
    • 果篮1:苹果2
    • 果篮2:none

E:first-of-type定义是:选择元素 E 所在的一组兄弟元素的第一个E类型的元素。

我们拆解一下

对于果篮1:

元素为苹果,且是第2个,就是苹果2。

对于果篮2:

元素为苹果的只有一个,显然取不出来第二个。

看了这俩个例子不难发现:

  • type型关注的群体是同类型的兄弟元素
总结
  • child型关注同群体的兄弟元素(一个群体不代表一个种族)
  • type型关注同群体且类型的兄弟元素

从直觉上来看child应该属于子元素,为什么这里与兄弟元素有关?

MDN:最初定义时,所选元素必须有一个 parent。而从选择器 Level 4 开始,parent 不再是必须的。

最开始的情况:

ul li {
  color: blue;
}
// 表示parent为ul的子元素中,是li且是第一个孩子的元素
ul li:first-child {
  color: red;
  font-weight: bold;
}

后续我认为是简化了这种写法,无需指明父元素,那么在不存在父元素的情况下,研究的对象范围就是他的兄弟元素。

// 在p的兄弟元素中,第一个标签且属于p种类
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值