# 关系选择器
根据标签之间的关系,改变标签样式
# 后代选择器
选择所有被E元素包含的F元素,被包含在第多少层都可以,中间用空格隔开
与合并选择器有区别,合并选择器是E和F都改变;后代选择器是只改变E里的F,E不变
/*在.css中*/
p b{ color: yellow; }
1
2
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
2
3
4
5
6
7
8
# 子代选择器
选择所有作为E元素的直接子元素F,只对包含的第一层有效,对更深层的不起作用,用>
表示
/*在.css中*/
div>a{ color: yellow; }
1
2
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
2
3
4
5
6
7
8
9
# 相邻兄弟选择器
选择紧跟E元素后的F元素,用加号+
表示,选择相邻的第一个兄弟元素,只能向下选择
/*在.css中*/
h1+p{ color: yellow; }
1
2
2
<!--在.html中-->
<p>第零个段落</p> <!--颜色不变-->
<h1>h1元素</h1>
<p>第一个段落</p> <!--颜色改变-->
<p>第二个段落</p> <!--颜色不变-->
1
2
3
4
5
2
3
4
5
# 通用兄弟选择器
选择E元素之后的所有兄弟元素F,作用于多个元素,用~
隔开,只能向下选择
/*在.css中*/
h1~p{ color: yellow; }
1
2
2
<!--在.html中-->
<p>第零个段落</p> <!--颜色不变-->
<h1>h1元素</h1>
<p>第一个段落</p> <!--颜色改变-->
<p>第二个段落</p> <!--颜色改变-->
1
2
3
4
5
2
3
4
5