# 关系选择器

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

# 后代选择器

选择所有被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
上次更新时间:: 3/2/2025, 11:27:03 PM