CSS基础之选择器进阶

拄着拐儿唱儿歌

已于 2022-04-04 14:31:17 修改

阅读量438

点赞数 1

分类专栏： # HTML+CSS 文章标签： css html 前端

于 2022-01-15 01:13:59 首次发布

本文链接：https://blog.csdn.net/qq_43615148/article/details/122504475

版权

HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

CSS基础之选择器进阶

背景：CSS因为是层叠样式，类似于儿子继承老子，如果儿子喜欢老子的东西，可以继承并继续使用，当然儿子也有可能不喜欢老子给的东西，就要对他继承过来的东西二次修改。如果没有用到这篇文章中所讲到的新知识，那么不出意外的话，可能就只能按照下面的代码实现了。
HTML：

<div class="father">老子喜欢红色
        <p class="sun">我是儿子我讨厌红色，我喜欢粉色</p>
</div>

CSS：

        .father{
            color: red;
        }
        .sun{
            color: pink;
        }

通过给儿子也打上标记，然后对他进行修改，否则的话，儿子就会自动继承老子给的红色字体。

注意：

如果我这个项目足够大，是一个村庄而不是一户人家，这个村庄里有很多位父亲和儿子，这时候sun选择器可能就不是那么友好了，每个儿子都有每个儿子的喜好，如果单纯设置儿子那么就把整个村庄的儿子强制性一起统一了，所以这时候如果能指定某位父亲的某位儿子就好了。这时候就需要引入第一个介绍的：

一、后代选择器

格式：“选择器一” + “空格” + “选择器二”
中间用空格隔开。
上面的代码就可以修改成以下形式：

        .father .sun{
            color: pink;
        }

既然是后代选择器，那么就肯定不止儿子，也可以指向孙子，重孙子，你家多能造你就能指定谁（跨辈分）如以下代码：
HTML：

    <div class="a">我是爷爷
        <p class="b">我是儿子
            <div class="c">我是孙子
                <div class="d">我是重孙子,我喜欢原谅~</div>
            </div>
        </p>
    </div>

CSS:

		.a .d{
            color: green;
        }

注意：这边不一定非得是类选择器，其他选择器之间也可以配合使用。

二、子代选择器

这位爷爷比较疼自己的孙子重孙子，有啥事都指定自己的儿子来干。
格式：”选择器一“ + “>” + “选择器二”
中间用加号隔开
HTML：

    <div class="a">我是爷爷
        <p class="b">我是儿子
            <div class="c">
                我是孙子
                <div class="d">我是重孙子,我喜欢原谅~</div>
            </div>
        </p>
    </div>

CSS：

        .a>.b{
            color: red;
        }

三、并集选择器

选择多种选择器进行统一设置。
格式：”选择器一“ + “,” + “选择器二”
中间用逗号隔开，一般建议使用叠罗汉一样的从上往下一行一行写，到时候看的时候方便看，给别人看也看的清爽一点。
HTML：

    <div class="aa">熊大</div>
    <div class="bb">熊二</div>
    <span class="cc">光头强</span>

CSS：

        .aa,
        .bb,
        span{
            color: red;
        }

四、交集选择器

找到满足条件一又满足条件二的标签进行设置。
格式一般有两种：
”选择器一“ + “选择器二”
中间不能有空格，如果有标签选择器，标签选择器必须写在前面。
HTML：

	<div class="banzhang">
        <span>一班班长</span>
    </div>
    <p id="banzhang">
        <span>二班班长</span>
    </p>

CSS：

        div.banzhang{
            color: yellow;
        }
        p#banzhang{
            color: blue;
        }

五、伪类选择器：

就是当鼠标悬停在某个标签上的时候，这个标签就会做出一系列效果。
格式：
”选择器“：hover

这里贴的代码包含了上面所有的代码：综合起来可以直接拿这个跑一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>
    <style>
        .father{
            color: red;
        }
        /* .sun{
            color: pink;
        } */
        /* 后代选择器，可以是标签选择器。也可以是其他选择器想结合中间用空格隔开 */
        .father .sun{
            color: pink;
        }
        .a .d{
            color: green;
        }

        /* 子代选择器，只包括儿子，用大于号表示 */
        .a>.b{
            color: red;
        }

        /* 并集选择器 */
        .aa,
        .bb,
        .cc{
            color: red;
        }
        
        div.banzhang{
            color: yellow;
        }
        p#banzhang{
            color: blue;
        }
        /* 伪类 */
        div:hover{
            font-size: 20px;
            color: green;
        }
        
    </style>
</head>
<body>

    <div class="a">我是爷爷
        <p class="b">我是儿子
            <div class="c">
                我是孙子
                <div class="d">我是重孙子,我喜欢原谅~</div>
            </div>
        </p>
    </div>

    <div class="aa">熊大</div>
    <div class="bb">熊二</div>
    <span class="cc">光头强</span>

    <div class="banzhang">
        <span>一班班长</span>
    </div>
    <p id="banzhang">
        <span>二班班长</span>
    </p>
    

</body>
</html>