CSS层次选择器

最新推荐文章于 2024-04-09 17:02:31 发布

异色小世界

最新推荐文章于 2024-04-09 17:02:31 发布

阅读量160

点赞数

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

本文链接：https://blog.csdn.net/lixingecho/article/details/113725383

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

后代选择器
- 选择层级内部的所有对应标签。
- 层级标签{}
- 如下所示，body内部所有p标签背景色都变成红色：
- ```
       body p{
           background-color: red;
       }
```
子选择器：
- 该层级下，只选择一代标签。
- 层级>标签{}
- 如下所示，body内部的第一代p标签背景色变成绿色。
- ```
       /*子选择器*/
       body>p{
           background-color: green;
       }
```

相邻兄弟选择器：

选择同辈且相邻的标签，相邻指的是紧挨着该元素的后一个同辈标签。
.class名称 +标签{}
如下所示，class对应p1，则p2的背景色变为黄色。

    <style>
        /*相邻兄弟选择器*/
        .active +p{
            background-color: yellow;
        }
    </style>

</head>
<body>
    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
</body>

通用兄弟选择器

选择在该元素之后的所有同辈标签。
.class名称~标签{}
如下所示，class对应p1，则p2~p3的背景色都变为黄色。

    <style>
        /*通用兄弟选择器*/
        .active~p{
            background-color: yellow ;
        }
    </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>
    </ul>
</body>

异色小世界

关注

0
点赞
踩
0

收藏

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

后代选择器选择层级内部的所有对应标签。层级标签{}如下所示，body内部所有p标签背景色都变成红色： body p{ background-color: red; }子选择器：该层级下，只选择一代标签。层级>标签{}如下所示，body内部的第一代p标签背景色变成绿色。 /*子选择器*/ body>p{ background-color:..
复制链接

扫一扫