零基础学习CSS(3)——交集选择器、并集选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器

Dragon水魅

发布于 2026-01-23 14:49:21

1100

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

交集选择器，语法规则：元素选择器

<!DOCTYPE html>
<html>
<head>
    <title>交集选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        span.content {
            border: thin black solid;
        }
    </style>
</head>
<body>
    <h1>交集选择器</h1>
    <p class="slogan">这是交集选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

并集选择器，同时对多个标签同时进行修改样式：

<!DOCTYPE html>
<html>
<head>
    <title>并集选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        span.content {
            border: thin black solid;
        }

        h2, p, span {
            font-style: italic; /* 斜体 */
        }
    </style>
</head>
<body>
    <h1>并集选择器</h1>
    <p class="slogan">这是并集选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

后代选择器，可以理解为：在……中找到……，然后执行……

<!DOCTYPE html>
<html>
<head>
    <title>后代选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        body .content { /* 用空格进行分割 */
            border: thin black solid;
        }
    </style>
</head>
<body>
    <h1>后代选择器</h1>
    <p class="slogan">这是后代选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

子元素选择器，只匹配子元素进行格式改变：

<!DOCTYPE html>
<html>
<head>
    <title>子元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        body > .content { /* span为body元素的孙子元素，不被匹配 */
            border: thin black solid;
        }
    </style>
</head>
<body>
    <h1>子元素选择器</h1>
    <p class="slogan">这是子元素选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

相邻兄弟选择器，只匹配相邻的、且为同一父元素的元素：

<!DOCTYPE html>
<html>
<head>
    <title>相邻兄弟选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        body > .content { /* span为body元素的孙子元素，不被匹配 */
            border: thin black solid;
        }

        h2, p, span {
            font-style: italic; /* 黑边框 */
        }

        .slogan + p { /* slogan紧跟的p元素 */
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>相邻兄弟选择器</h1>
    <p class="slogan">这是相邻兄弟元素选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

通用兄弟选择器，匹配位置无须紧邻，只须同层级：

<!DOCTYPE html>
<html>
<head>
    <title>相邻兄弟选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        body > .content { /* span为body元素的孙子元素，不被匹配 */
            border: thin black solid;
        }

        h2, p, span {
            font-style: italic; /* 黑边框 */
        }

        .slogan ~ p { /* slogan紧跟的p元素 */
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>相邻兄弟选择器</h1>
    <p class="slogan">这是相邻兄弟元素选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>