# 关系选择器

根据标签之间的关系，改变标签样式

# 后代选择器

选择所有被E元素包含的F元素，被包含在第多少层都可以，中间用空格隔开

与合并选择器有区别，合并选择器是E和F都改变；后代选择器是只改变E里的F，E不变

/*在.css中*/
p b{ color: yellow; }

1
2

<!--在.html中-->
<p>
    123<br/>456<b>789</b>147<i>258</i>
</p>
<!--789改变颜色，其他不变-->
<ol>
    <li>12<b>34</b>56</li>  <!--这里的b标签的内容34颜色不变-->
</ol>

1
2
3
4
5
6
7
8

选择所有作为E元素的直接子元素F，只对包含的第一层有效，对更深层的不起作用，用>表示

/*在.css中*/
div>a{ color: yellow; }

1
2

<!--在.html中-->
<div>
    <a href="#">子元素1</a>
    <p>
        <a href="#">孙元素</a>
    </p>
    <a href="#">子元素2</a>
</div>
<!-- 子元素颜色改变，孙元素不变 -->

1
2
3
4
5
6
7
8
9

选择紧跟E元素后的F元素，用加号+表示，选择相邻的第一个兄弟元素，只能向下选择

/*在.css中*/
h1+p{ color: yellow; }

1
2

<!--在.html中-->
<p>第零个段落</p>   <!--颜色不变-->
<h1>h1元素</h1>
<p>第一个段落</p>   <!--颜色改变-->
<p>第二个段落</p>   <!--颜色不变-->

1
2
3
4
5

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择

/*在.css中*/
h1~p{ color: yellow; }

1
2

<!--在.html中-->
<p>第零个段落</p>   <!--颜色不变-->
<h1>h1元素</h1>
<p>第一个段落</p>   <!--颜色改变-->
<p>第二个段落</p>   <!--颜色改变-->

1
2
3
4
5