CSS6：层次选择器

最新推荐文章于 2023-03-16 14:50:07 发布

工一木子

最新推荐文章于 2023-03-16 14:50:07 发布

阅读量366

点赞数

分类专栏： CSS学习

本文链接：https://blog.csdn.net/Prince140678/article/details/119850593

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

6、层次选择器

2.2、层次选择器

1、后代选择器：在某个元素的后面祖爷爷爷爷爸爸你

body p {
    background-color: red;
}

2、子选择器：一代，儿子

body>p {
    background-color: #740c80;
}

3、相邻兄弟选择器:同辈

.active + p {
    background-color: aqua;
}

4、通用选择器

.active~p {
    background-color: blue;
}

代码show

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*p {
                background-color: green;
            }*/
            /*后代选择器*/
           /* body p {
                background-color: red;
            }*/
            /*子选择器*/
            /*body>p {
                background-color: #740c80;
            }*/
            /*相邻兄弟选择器，只有一个,向下*/
           /* .active + p {
                background-color: aqua;
            }*/
            /*通用兄弟选择器，当前选中元素的向下的所有的兄弟元素*/
            .active~p {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <p>p0</p>
        <p class="active">p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>


    </body>
</html>

工一木子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS6：层次选择器

6、层次选择器2.2、层次选择器1、后代选择器：在某个元素的后面祖爷爷爷爷爸爸你body p { background-color: red;}2、子选择器：一代，儿子body>p { background-color: #740c80;}3、相邻兄弟选择器:同辈.active + p { background-color: aqua;}4、通用选择器.active~p { background-color: blue
复制链接

扫一扫