CSS——层次选择器

小吴在敲Bug

已于 2022-05-18 22:18:47 修改

阅读量292

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2022-05-18 17:03:54 首次发布

本文链接：https://blog.csdn.net/qq_45042462/article/details/124845867

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

1、后代选择器
2、子选择器
3、向下选择器
4、通用选择器

1、后代选择器

在某个标签后面的所有子标签

/*后代选择器*/
        body p{
            background: #03f39f;
        }

在这里插入图片描述

2、子选择器

后面一个

body>p{
            background: red;
        }

在这里插入图片描述

3、向下选择器

向下一个

/*向下选择器*/
            .active + p {
                background: blanchedalmond;
            }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>

            /*向下选择器*/
            .active + p {
                background: blanchedalmond;
            }

        </style>

    </head>
    <body>

        <p>p0</p>
        <p class="active">p1</p>
        <p>p2</p>
        <p class="active">p3</p>
        <p>p6</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>p5</li>
        </ul>

    </body>
</html>

在这里插入图片描述

4、通用选择器

通用选择器，当前选中元素的向下所有同级标签

/*通用选择器，当前选中元素的向下所有同级标签*/
            .active~p{
                background: blanchedalmond;
            }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>

            /*通用选择器，当前选中元素的向下所有同级标签*/
            .active~p{
                background: blanchedalmond;
            }
        </style>

    </head>
    <body>

        <p>p0</p>
        <p class="active">p1</p>
        <p>p2</p>
        <p >p3</p>
        <p>p6</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>p5</li>
        </ul>
        <p>p7</p>

    </body>
</html>