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

最新推荐文章于 2023-05-22 19:43:03 发布

是橘子不是桔子

最新推荐文章于 2023-05-22 19:43:03 发布

阅读量257

点赞数

本文链接：https://blog.csdn.net/qq_55368677/article/details/129659617

版权

辨析xxx-child和xxx-type⭐️

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

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

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无非要满足如下条件：

研究对象是E元素处于的群组中（E所在的水果篮子）
比较的范围是与E处于同一层级的所有元素（篮子里面所有水果）
比较范围中满足选择器描述条件的元素（如first-child就是比较范围中第一个元素，即水果篮子里面第一个元素）
该元素属于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>

type相关

仍然以这个案例为例：

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;
}