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>