程序员经验分享-hwhale

CSS——层次选择器

2023-11-04

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>

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

CSS3

html

CSS——层次选择器 的相关文章