关系选择器(兄弟、父子选择器)

comegoing-归去兮来

已于 2022-07-31 08:58:53 修改

阅读量4.1k

点赞数 4

分类专栏：前端css基础文章标签： css java 前端

于 2022-07-11 20:25:16 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125729306

版权

前端css基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一、选择器种类

1、儿子单个选择器

2、后代全部选择器

3、相邻兄弟选择器（必须是兄弟且严格相邻）

一、选择器种类

1、儿子单个选择器

（1）格式：父亲>儿子

（2）例子

div > span{color: blue;font-size: 40px;}

2、后代全部选择器

（1）格式：祖先后代（中间是空格）

（2）例子

div span{color: red;}

3、相邻兄弟选择器（必须是兄弟且严格相邻）

（1）格式：当前+兄弟

（2）例子

p + span{color: greenyellow;}

4、全部兄弟选择器

（1）格式：当前~兄弟

（2）例子（第一个是选择p的span标签兄弟，而第二个是所有兄弟）

p ~ span{
    color: black;
}
p ~ *{
    color: white;
}

二、相关代码例子

1、关系图解

2、代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>关系选择器(兄弟、父子选择器)</title>
    <style>
        /* 父子选择 ，单个*/
        /* div > span{
            color: blue;
            font-size: 40px;
        } */
        /* 祖先后代选择，全部 */
        /* div span{
            color: red;
        } */
        /* 必须相邻兄弟选择，是兄弟但不相邻，不选择 */

        /* p + span{
            color: greenyellow;
        } */
        /* 全兄弟选择 */
        /* p ~ span{
            color: black;
        }
        p ~ *{
            color: white;
        } */

    </style>
</head>
<body>
    <div>
        我是div
        <p>
            我是div中的p
            <span>我是p中的span</span>
        </p>
        <div>我是div中的div</div>
        <span>我是div中的span1</span>
        <span>我是div中的span2</span>

    </div>
    <span>我是div之外的span1</span>
    <span>我是div之外的span2</span>

</body>

</html>