css选择器（继承补充）

关系选择器分类
后代选择器
1
子代选择器
2
相邻兄弟选择器
3
通用兄弟选择器
1.后代选择器：
我们用通俗的语言来解释一下"后代选择器"。

你可以把它想象成"爷爷-孙子"关系，或者更广泛地说，是"祖先-后代"关系。

E：代表一个"祖先"元素，比如一个大的盒子、一个房间。
F：代表一个"后代"元素，比如放在大盒子里面的小盒子，或者在房间里的人。
空格：这个空格的意思就是"里面的"、"包含的"。

所以，"E F"这个选择器的意思就是：

"找到所有在E这个'大家庭'（或大容器）里面的F元素，不管它们是直接的孩子、孙子，还是更远的后代，都算！"

举个生活中的例子：

想象一个家庭：

有一个曾祖父 (<div class="family">)
- 他有一个儿子 (<p>)
  - 儿子有一个儿子 (<span>) ------ 这是曾祖父的孙子
- 他还有一个女儿 (<ul>)
  - 女儿有一个儿子 (<li>)
    - 外孙有一个儿子 (<span>) ------ 这是曾祖父的外曾孙

现在，我们写一个 CSS 选择器：div span

div 就是那个"曾祖父"（代表整个家庭）。
span 是我们要找的"后代"。
中间的空格表示"在...里面的"。

这个选择器会选中：

儿子的儿子 (<span>) ------ 因为它在 div 里面。
外孙的儿子 (<span>) ------ 因为它也在 div 里面。

即使这两个 <span> 和 <div> 之间隔了好几代（中间有 <p>、<ul>、<li> 等元素），它们依然是 <div> 的后代，所以都会被选中。

总结一下： 后代选择器 E F 就像在说："在E这个大家庭里，所有叫F的成员，不管辈分高低，都给我站出来！" 它不关心F是直接孩子还是隔了好几代的远房亲戚，只要在E的"势力范围"（HTML结构）内，就算。

后代选择器是选择在这个父元素里所有符合要求的标签

复制代码

<style>
    /* 找所有在 div 里面的 a 标签 */
    div a {
        color: red;
    }
</style>

<body>
    <div>
        <!-- 第一个 a：亲儿子 -->
        <a href="#">我是儿子A标签</a>

        <!-- 第二个 a：孙子 -->
        <p>
            <a href="#">我是孙子A标签</a>
        </p>

        <!-- 第三个 a：曾孙 -->
        <section>
            <ul>
                <li>
                    <a href="#">我是曾孙A标签</a>
                </li>
            </ul>
        </section>
    </div>

    <!-- 第四个 a：在 div 外面，不算 -->
    <a href="#">我在外面，不算后代</a>
</body>

2.子代选择器

只会在父类的下一代仅子类中选择元素继承，我的孙子辈不会再享受父辈的余荫

E>F{}
1
<div>
<a href="#">子元素1</a>
<p> <a href="#">孙元素</a> </p>
<a href="#">子元素2</a>
</div>
div>a{
color:red
}

3.相邻兄弟选择器
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元
素

E+F{}
1
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
1
2
3
h1+p{
color:red;
}

4.通用兄弟选择器

将该元素平等缩进的所有兄弟元素，只要是选择的指定兄弟元素都继承

一个，两个。三个都继承
定义
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开
语法
E+F{}
1
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
1
2
3
h1+p{
color:red;
}
1
2
3
E~F{}
1
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>