4、关系选择器（父子关系、祖先后代关系、兄弟关系）

zhengqiqiqinqin

已于 2022-02-26 21:36:27 修改

阅读量1.1k

点赞数

文章标签： css3 css html

于 2022-02-26 21:20:56 首次发布

本文链接：https://blog.csdn.net/zhengqiqiqinqin/article/details/123142657

版权

1、子元素选择器：

HTML代码：

    <div>
        <p>
            我是p元素中的文字
            <span>这是p元素里面的span</span>
        </p>
        <span>这是div里面的span</span>
    </div>

    <div>
        <span>这是第2个div里面的span</span>
    </div>

对应的CSS代码：

<style>
        /*
            父元素：直接包含子元素的元素叫父元素
            子元素：直接被父元素包含的元素叫子元素
            祖先元素：
                -直接或者间接包含后代元素的元素叫祖先元素
                -一个元素的父元素也是该元素的祖先元素（父元素是一种特殊的祖先元素）
            后代元素：
                -直接或者间接被祖先元素包含的元素

            子元素选择器：
                作用：选中指定父元素的指定子元素
                语法：父元素 > 子元素
                举例：如下
        */
            div>span{
                color:blue;
            }

 </style>

运行结果如下：只有div下子元素span变成蓝色（所有div下直接的span元素变成蓝色，有多个这种结构，就都变色），p元素下的span元素不变色，因为p元素下的span元素是div的后代元素。

2、后代元素选择器

HTML代码：

    <div>
        <p>
            我是p元素中的文字
            <span>这是p元素里面的span</span>
        </p>
        <span>这是div里面的span</span>
    </div>

    <div>
        <span>这是第2个div里面的span</span>
    </div>

对应的CSS代码：

           /* 后代元素选择器
                    作用：选中指定元素的指定后代元素
                    语法：祖先元素 后代元素
                    举例：如下
            */
            div span{
                color:rgb(20, 220, 63);
            }

运行结果：

3.1、兄弟选择器1：选择该元素后紧挨着的第一个兄弟元素

HTML代码：

    <div>
        <p>
            我是p元素中的文字
            <span>这是p元素里面的span</span>
        </p>
        <span>这是div里面的span</span>
    </div>

    <div>
        <span>这是第2个div里面的span</span>
    </div>

CSS代码：

            /*兄弟选择器1：选择其后紧挨着的兄弟
                语法：前一个元素 + 后一个元素(作用于后面紧挨着的元素)
            */
            p+span{
                color:chartreuse;
            }

运行效果：

3.2、兄弟选择器2：选择该元素后所有兄弟元素

HTML代码：

    <div>
        <p>
            我是p元素中的文字
            <span>这是p元素里面的span</span>
        </p>
        <span>这是div里面的span1</span>
        <span>这是div里面的span2</span>
        <span>这是div里面的span3</span>
    </div>

CSS代码：

            /*兄弟选择器二
                选择下面所有兄弟
                语法：前一个元素 ~ 后一个元素(作用于后面的元素) （这是波浪线）
            */
            p~span{
                color:rgb(0, 139, 7);
            }

运行结果：