CSS的三种层次选择器

最新推荐文章于 2024-08-09 17:43:58 发布

陈大事cg

最新推荐文章于 2024-08-09 17:43:58 发布

阅读量624

点赞数

分类专栏： html+css+js 文章标签： css html idea

本文链接：https://blog.csdn.net/qq_52523963/article/details/125144602

版权

html+css+js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、后代选择器

在某个元素的后面，全部应用。

二、子选择器

在某个元素的一代应用。

三、相邻兄弟选择器

当前选中元素向下的一个同代元素。

四、通用选择器

当前选中元素向下的所有同代元素。

具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        /*
        body p{
            background:red;
        }
        */
        /*子选择器*/

        body>p
        {
            background: #3cbda6;
        }
        /*相邻兄弟选择器 : 只有一个，相邻向下*/
        /*
        .active + p{
            background: darkgreen;
        }
        */
        /*通用兄弟选择器：选中的相邻向下所有*/
        /*
        .active~p{
            background: aquamarine;
        }
        */
         */
    </style>

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