层次选择器

层次选择器

1、后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你

/*后代选择器*/
        body p{
             background: lightpink;
         }

2、子选择器 一代，儿子

    /*子选择器*/
        body>p{
            background: cornflowerblue;
        }

3、相邻兄弟选择器 同辈

/*相邻兄弟选择器: 只有一个，相邻(对下) */
        .active + p{
            background: blue;
        }

4、通用选择器

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

    <style>
        /*p{
            color: coral;
        }*/
        /*!*后代选择器*!*/
        /*body p{*/
        /*     background: lightpink;*/
        /* }*/
        /*子选择器*/
        /*body>p{*/
        /*    background: cornflowerblue;*/
        /*}*/
        /*相邻兄弟选择器: 只有一个，相邻(对下) */
        /*.active + p{*/
        /*    background: blue;*/
        /*}*/
        /*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background: darkgreen;
        }
    </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>
</html>
复制代码

 

posted @   少时凌云志  阅读(41)  评论(0)  编辑  收藏  举报
相关博文：
·  属性选择器
·  结构伪类选择器
·  层次选择器
·  层次选择器
·  2022.4.6 层次选择器
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手