CSS层次选择器，一看就会了

思诚代码块

已于 2022-01-26 18:23:03 修改

阅读量1.2k

点赞数 2

分类专栏： CSS 系列笔记+源码展示文章标签： css 前端网页

于 2022-01-26 18:20:51 首次发布

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122705748

版权

CSS 系列笔记+源码展示专栏收录该内容

19 篇文章 4 订阅

订阅专栏

大家好，今天给大家分享一下CSS层次选择器

顾名思义，层次选择器就是有一定层级关系的选择器

在这里插入图片描述

看这个图就可以了

使用代码实现一下上面的层次关系：

上源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background: green;
        }
    </style>
</head>
<body>
    <p>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>

看效果：

在这里插入图片描述

现在我们在原先的基础之上，来讲一下后代选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p{*/
        /*    background: green;*/
        /*}*/

        /*后代选择器*/
        body p{
            /*就是对body后面所有的标签内容进行属性的调节*/
            background: red;
        }
    </style>
</head>
<body>
    <p>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>

<style>
        /*p{*/
        /*    background: green;*/
        /*}*/

        /*后代选择器*/
        body p{
            /*就是对body后面所有的标签内容进行属性的调节*/
            background: red;
        }
    </style>

这就是后代选择器：如：爷爷父亲儿子

显示结果：

在这里插入图片描述
下面讲子类选择器：

就是父亲与儿子的关系

body >p{
            background: blue;
            /*就是一代的关系*/
            
        }

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p{*/
        /*    background: green;*/
        /*}*/

        /*后代选择器*/
        /*body p{*/
        /*    !*就是对p后面所有的标签内容进行属性的调节*!*/
        /*    background: red;*/
        /*}*/
        body >p{
            background: blue;
            /*就是一代的关系，
            子选择器*/

        }
    </style>
</head>
<body>
    <p>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>

看网页效果：

在这里插入图片描述

下面我们讲相邻兄弟选择器：

就是同辈的关系（姐姐，妹妹）

上源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p{*/
        /*    background: green;*/
        /*}*/

        /*后代选择器*/
        /*body p{*/
        /*    !*就是对p后面所有的标签内容进行属性的调节*!*/
        /*    background: red;*/
        /*}*/
        /*body >p{*/
        /*    background: blue;*/
        /*    !*就是一代的关系*!*/

        /*}*/
        
        /*相邻兄弟选择器*/
        .active +p{
            /*向下，只有一个*/
            background: brown;
        }
    </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>
    <p class="active"></p>
</ul>
</body>
</html>

看结果：

在这里插入图片描述
这就是相邻兄弟选择器

下面讲通用选择器：

即当前选中元素向下的所有兄弟元素

 .active ~p {
            background: blanchedalmond;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p{*/
        /*    background: green;*/
        /*}*/

        /*后代选择器*/
        /*body p{*/
        /*    !*就是对p后面所有的标签内容进行属性的调节*!*/
        /*    background: red;*/
        /*}*/
        /*body >p{*/
        /*    background: blue;*/
        /*    !*就是一代的关系*!*/

        /*}*/

        /*相邻兄弟选择器*/
        /*.active +p{*/
        /*    !*向下，只有一个*!*/
        /*    background: brown;*/
        /*}*/
        .active ~p {
            background: blanchedalmond;
        }
    </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>
    <p class="active"></p>
</ul>
</body>
</html>