CSS复合选择器之后代选择器

最新推荐文章于 2024-07-06 20:00:00 发布

巨龙之路

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量640

点赞数 2

分类专栏：我的博客文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_61629312/article/details/129987350

版权

我的博客专栏收录该内容

160 篇文章 9 订阅

订阅专栏

今天早上上web课，我看课本的时候遇到了一个问题，那就是到底什么是后代选择器，书上说得不清不楚的，想了一个早上有终于有所领悟，故记录下我的学习成果。

首先提出一个问题，那就是下面这些CSS复合选择器是不是后代选择器？

用我课本的说法，根本解释不了下面大部分的选择器是不是后代选择器

后代选择器的写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

就是这些在课本上看到的复合选择器引起了我对后代选择器本质的思考。

p strong{
    color:black;
}

.father strong{
    color:yellow;
}

p.father strong{
    color:orange;
}

p.father .blue{
    color:gold;
}

#header strong{
    color:pink;
}

#header strong.blue{
    color:red;
}

如何去辨别一个复合选择器是不是后代选择器？

1、看各个选择器之间有没有空格隔开

2、实际运行起来看看，如果只有嵌套在最里面的选择器发生了符合规定的变化，那么就是后代选择器

注意：在上面两点中我没有提到基础选择器而是用选择器来替代，因为选择器包括基础选择器和复合选择器，在后代选择器中，不一定都是基础选择器，还可能有复合选择器。

现在来逐个分析上面的复合选择器：

第一个复合选择器：

p strong{
    color:black;
}

这个没什么好说的，就是符合课本定义的标准的后代选择器，不是本博客主要讨论的对象

第二个复合选择器：

.father strong{
    color:yellow;
}

虽然用空格隔开了，但.father是类，不是标签啊，这个是后代选择器吗？

我的课本是这样说的：

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

按照课本的说法，这个不是后代选择器，因为.father是类，不是标签。

那我们来看看运行效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father strong{
            color:yellow;
        }   
    </style>
</head>
<body>
    <h3 class="father"><strong>嵌套在.father里面的strong</strong></h3>
    <strong>普通的strong</strong>
</body>
</html>

这说明第二个复合选择器就是后代选择器，

而且还说明了一个事实，那就是后代选择器不局限于标签选择器，也可以使用类选择器，

课本的说法实在是不够严谨。

第三个复合选择器：

p.father strong{
    color:orange;
}

很明显，虽然选择器用空格隔开了，但是有一个是交集选择器，按照课本的只能用标签的说法，这个根本不是后代选择器。

那我们来看看运行效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.father strong{
            color:orange;
        }
    </style>
</head>
<body>
    <p class="father"><strong>嵌套在p.father里面的strong</strong></p>
    <strong>普通的strong</strong>
</body>
</html>