CSS04：层级选择器

一个优雅的搬砖人

已于 2022-02-28 13:24:17 修改

阅读量1.7k

点赞数 1

分类专栏： # CSS 文章标签： linq p2p html

于 2022-02-10 16:58:16 首次发布

本文链接：https://blog.csdn.net/weixin_48306950/article/details/122864480

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

后代选择器（空格）

在某个元素的后面；比如祖爷爷的“后代选择器”有爷爷、爸爸、你

举例：body 后的所有 p 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 后代选择器 */
        body p {
            background: chartreuse;
        }
    </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>
<p>p7</p>
<p>p8</p>
</body>
</html>

子选择器（>）

某个元素的下一级元素；比如爷爷的“子选择器”是爸爸

举例：body 的下一级 p 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 子选择器 */
        body > p {
            background: #ff008a;
        }
    </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>
<p>p7</p>
<p>p8</p>
</body>
</html>

相邻兄弟选择器（+）

同级向下相邻的一个元素；比如你有一个哥哥和一个弟弟，那么你的“相邻兄弟选择器”是你的弟弟

举例：p1 的相邻兄弟 p 元素，只有 p2 的样式会发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 相邻兄弟选择器，只有p2的样式会发生改变 */
        .active + p {
            background: gold;
        }
    </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>

通用兄弟选择器（~）

当前元素的向下的所有兄弟元素；你的“通用兄弟选择器”是你的弟弟妹妹们

举例：p2 的通用兄弟 p 元素，是 p2 后面的所有 p 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 通用选择器 */
        .active ~ p {
            background: aqua;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="active">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>
<p>p8</p>
</body>
</html>

一个优雅的搬砖人

关注

1
点赞
踩
6

收藏

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

后代选择器在某个元素的后面；比如祖爷爷的“后代选择器”有爷爷、爸爸、你举例：body 后的所有 p 元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 后代选择器 */ body p { ...
复制链接

扫一扫

专栏目录