5.1 选择器类型
CSS中的组合选择器允许根据它们在DOM树中的相对位置选择元素。它们提供了更精细的样式控制，可以根据元素的上下文对其进行样式设置。在CSS中，有几种类型的组合选择器：后代、子元素、相邻兄弟元素和一般兄弟元素。
组合选择器类型：
- 后代选择器 (Descendant Selector)
- 子元素选择器 (Child Selector)
- 相邻兄弟选择器 (Adjacent Sibling Selector)
- 一般兄弟选择器 (General Sibling Selector)
5.2 后代选择器
后代选择器选择的是所有是指定元素的后代的元素。后代是指所有位于指定元素内部的元素在任何嵌套层级 (不仅限于子代，还包括孙代和重孙代)。
语法：
父元素 后代元素 {
属性: 值;
属性: 值;
}
示例：
CSS
/* 选择所有位于 <div> 内的 <p> */
div p {
color: blue;
}
HTML
<div>
<p>这个段落将是蓝色的。</p>
<div>
<p>这个段落也会是蓝色的，因为它是 “div” 的后代。</p>
</div>
</div>
<p>这个段落将不会是蓝色的。</p>
5.3 子元素选择器
子元素选择器仅选择作为指定父元素的直接子元素的元素。
语法：
父元素 > 子元素 {
属性: 值;
属性: 值;
}
示例：
CSS
/* 选择仅作为 .container 的直接子元素的 <p> */
.container > p {
color: green;
}
HTML
<div class="container">
<p>这个段落将是绿色的。</p>
<div class="wrapper">
<p>这个段落将不会是绿色的，因为它不是 .container 的直接子元素。</p>
</div>
<p>这个段落将是绿色的。</p>
</div>
<p>这个段落将不会是绿色的。</p>
5.4 相邻兄弟选择器
相邻兄弟选择器选择紧接在指定元素之后的元素，并且处于同一嵌套层级。
语法：
前一个 + 后一个 {
属性: 值;
属性: 值;
}
CSS
/* 选择紧接在 <h1> 之后的 <p> */
h1 + p {
color: red;
}
HTML
<h1>标题 1</h1>
<p>这个段落将是红色的，因为它紧接在 “h1” 之后。</p>
<p>这个段落将不会是红色的。</p>
5.5 一般兄弟选择器
一般兄弟选择器选择所有元素，这些元素位于指定元素之后，并且处于同一嵌套层级。
语法：
前一个 ~ 后一个 {
属性: 值;
属性: 值;
}
示例：
CSS
/* 选择所有位于 <h1> 之后且处于同一嵌套层级的 <p> */
h1 ~ p {
color: purple;
}
HTML
<h1>标题 1</h1>
<p>这个段落将是紫色的。</p>
<p>这个段落也将是紫色的。</p>
<div>
<p>这个段落将不会是紫色的，因为它在不同的嵌套层级。</p>
</div>
GO TO FULL VERSION