CSS - 4、复合选择器

复合选择器是CSS中用于更精确地选择HTML元素的选择器组合。通过将不同类型的选择器组合在一起，可以更具体地定位页面中的元素，从而实现更灵活的样式控制。复合选择器包括以下几种类型：后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器和分组选择器。

---

1. 后代选择器（Descendant Selector）

后代选择器用于选择某个元素内部的所有后代元素，无论它们的嵌套层次有多深。

语法：

A B {
    /* 选择A元素内部的所有B元素 */
}

示例：

<div class="container">
    <p>这是一个段落。</p>
    <div>
        <p>这是另一个段落。</p>
    </div>
</div>

.container p {
    color: red;
}

结果：

• 所有位于.container内部的<p>元素（无论嵌套多深）都会被选中并应用样式。

特点：

• 作用范围广：会选择所有后代元素，不考虑嵌套层级。
• 优先级：与其他选择器组合时，优先级取决于具体的选择器类型。

---

2. 子代选择器（Child Selector）

子代选择器用于选择某个元素的直接子元素，即只匹配第一层子元素。

语法：

A > B {
    /* 选择A元素的直接子元素B */
}

示例：

<div class="container">
    <p>这是一个段落。</p>
    <div>
        <p>这是另一个段落。</p>
    </div>
</div>

.container > p {
    color: blue;
}

结果：

• 只有直接位于.container内部的<p>元素会被选中，嵌套在其他元素内的<p>不会被选中。

特点：

• 精确性高：只选择直接子元素，不包括更深层次的后代。
• 优先级：与其他选择器组合时，优先级取决于具体的选择器类型。

---

3. 相邻兄弟选择器（Adjacent Sibling Selector）

相邻兄弟选择器用于选择紧接在另一个元素之后的兄弟元素。

语法：

A + B {
    /* 选择紧接在A元素之后的B元素 */
}

示例：

<h2>标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

h2 + p {
    color: green;
}

结果：

• 只有紧接在<h2>之后的第一个<p>元素会被选中并应用样式。

特点：

• 顺序相关：只选择紧接在指定元素之后的兄弟元素。
• 优先级：与其他选择器组合时，优先级取决于具体的选择器类型。

---

4. 通用兄弟选择器（General Sibling Selector）

通用兄弟选择器用于选择某个元素之后的所有兄弟元素，而不仅仅是紧接的下一个兄弟。

语法：

A ~ B {
    /* 选择A元素之后的所有B元素 */
}

示例：

<h2>标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是一个div。</div>

h2 ~ p {
    color: orange;
}

结果：

• 所有位于<h2>之后的<p>元素都会被选中并应用样式。

特点：

• 范围广：选择所有兄弟元素，而不仅仅是紧接的下一个。
• 优先级：与其他选择器组合时，优先级取决于具体的选择器类型。

---

5. 分组选择器（Grouping Selector）

分组选择器用于同时为多个选择器应用相同的样式规则。它通过逗号分隔多个选择器。

语法：

A, B, C {
    /* 同时为A、B和C应用相同的样式 */
}

示例：

<h1>标题1</h1>
<h2>标题2</h2>
<p>这是一个段落。</p>

h1, h2, p {
    font-family: Arial, sans-serif;
    color: purple;
}

结果：

• 所有<h1>、<h2>和<p>元素都会应用相同的样式。

特点：

• 代码复用：可以减少重复代码，提高样式表的可维护性。
• 优先级：与其他选择器组合时，优先级取决于具体的选择器类型。

---

6. 组合选择器的优先级

组合选择器的优先级取决于其组成部分的选择器类型。例如：

• .container p：类选择器（.container）和元素选择器（p）组合，优先级高于单纯的元素选择器。
• #main > p：ID选择器（#main）和子代选择器（>）组合，优先级高于类选择器。

组合选择器的优先级计算方法是：

1. ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素
2. 组合选择器的优先级：由最具体的选择器决定。

---

7. 总结

复合选择器是CSS中非常强大的工具，可以帮助你更精确地选择HTML元素。以下是复合选择器的类型和特点：

复合选择器类型	语法	特点
后代选择器	A B	选择A内部的所有B元素，不考虑嵌套层级。
子代选择器	A > B	选择A的直接子元素B。
相邻兄弟选择器	A + B	选择紧接在A之后的B元素。
通用兄弟选择器	A ~ B	选择A之后的所有B元素。
分组选择器	A, B, C	同时为多个选择器应用相同的样式。