＜css3-关系结点选择器＞

最新推荐文章于 2024-10-01 23:20:42 发布

好先生·

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量128

点赞数

分类专栏： css3 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45540964/article/details/109614141

版权

css3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 关系选择器 -->
    <style type="text/css">
        /*渲染容器中的子元素(p)*/
        /*只渲染儿子关系
          不会将后代的后代进行渲染
        */
        .container > p {
            background: pink;
        }


        /*选择后面第一个兄弟
            必须是紧挨着的兄弟
            中间有其他标签会失败
            div-3被选中
        */
        .demo + div {
            background: green;
        }


        /*选则后代中所有的同级兄弟(不管标签)*/
        .demo ~ .item {
            background: yellow;
        }

        .demo.item {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="item">p-1-1</p>
        <p class="item">p-2-2</p>
        <p class="item">p-3-3</p>
        <p class="item">p-4-4</p>
        <p class="item">p-5-5</p>
        <div>
            <p>p-other</p>
            <div>
                <div>
                    <p class="item">p-inner</p>
                </div>
            </div>
        </div>
        <div class="item">div-1-1</div>
        <div class="item demo">div-2-2</div>
        <div class="item">div-3-3</div>
        <h3 class="item">h3-1-1</h3>
        <h3 class="item">h3-2-2</h3>
    </div>
</body>
</html>