css-层次选择器

最新推荐文章于 2023-10-17 23:31:20 发布

王2gou蛋

最新推荐文章于 2023-10-17 23:31:20 发布

阅读量50

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_38959934/article/details/117907014

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、后代选择器

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

在这里插入图片描述

二、子选择器

/* 子选择器 */
body>p{
    background: #12ec4e;
}

在这里插入图片描述

三、相邻兄弟选择器–向下选择第一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 相邻兄弟选择器： 只有一个，对下不对上   */
        .active + p{
            background: green;
        }
    </style>
</head>
<body>
    <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>

在这里插入图片描述

四、通用兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素  */
        .active~p{
            background: red;
        }
    </style>
</head>
<body>
    <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>
    <p>p7</p>
</body>
</html>

在这里插入图片描述

https://www.bilibili.com/video/BV1YJ411a7dy?p=6

王2gou蛋

关注

0
点赞
踩
0

收藏

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

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

扫一扫