CSS 组合选择符
在 CSS 中，组合选择符（Combinators）用于描述元素之间的结构关系，比如父子、兄弟、后代等。组合选择符并不是单独的选择器，而是连接两个选择器形成复合规则。
✅ 一、常见组合选择符一览
| 组合符 | 名称 | 作用关系 | 示例 |
|---|---|---|---|
空格 | 后代选择器 | 选择某元素 内部所有层级 的指定后代 | |
> | 子选择器 | 选择某元素的 直接子元素 | |
+ | 相邻兄弟选择器 | 选择某元素 紧接在后面 的同级兄弟元素 | |
~ | 通用兄弟选择器 | 选择某元素 后面所有 同级兄弟元素 |
✅ 二、详细讲解与示例
🔹 1. 后代选择器（空格）
选择 A 元素内部所有后代（不限层级）的 B 元素。
div p {
color: red;
}
✅ 表示：所有 div 元素中任意层级的 <p> 都变红。
🔹 2. 子选择器（>）
只选择 A 元素的直接子元素 B。
ul > li {
list-style: square;
}
✅ 表示：只选中 <ul> 下第一层的 <li>，不会选中嵌套在二级、三级 <ul> 中的 <li>。
🔹 3. 相邻兄弟选择器（+）
选择 A 元素之后紧接着的第一个兄弟元素 B（必须是同级元素）。
h2 + p {
margin-top: 0;
}
✅ 表示：所有紧跟在 <h2> 后的第一个 <p> 元素，取消顶部外边距。
🔹 4. 通用兄弟选择器（~）
选择 A 元素之后，所有同级别后续兄弟元素 B。
h2 ~ p {
color: blue;
}
✅ 表示：所有出现在 <h2> 之后的兄弟 <p> 元素都变蓝。
✅ 三、组合选择器的实际应用场景
| 场景 | 推荐选择符 | 示例 |
|---|---|---|
| 表格中只选第一层行 | 子选择器 > | table > tr |
段落后加图标，只给第一个 p 加 | 相邻兄弟 + | p + span.icon |
| 高亮所有跟标题在同级的段落 | 通用兄弟 ~ | h1 ~ p |
设置某类按钮中所有 span | 后代选择器 | .btn span |
✅ 四、组合使用示例（多重组合）
ul > li.active + li span {
color: orange;
}
✔ 表示：
- 在一个
<ul>的直接子元素<li>中， - 如果该
<li>有类名active， - 那么紧跟它后面的兄弟
<li>中的<span>元素变橙色。
✅ 五、注意事项
- 组合符中间必须有空格或明确符号（
>、+、~），否则是类名连接。 - 与
.class1.class2不同：.box .title是后代选择器，.box.title是同时具有两个类的单个元素。 - 使用
+和~的元素必须是同一父元素下的兄弟元素。
✅ 六、组合选择器与伪类结合
可以与伪类（如 :hover, :first-child）组合使用：
ul > li:first-child {
font-weight: bold;
}
✔ 选中 <ul> 的第一个直接子 <li> 元素。
✅ 七、对比总结表
| 组合符 | 名称 | 关系类型 | 是否同级 | 是否紧邻 | 层级限制 |
|---|---|---|---|---|---|
| 后代选择器 | 包含关系 | ❌ | ❌ | ❌ |
> | 子选择器 | 父子关系 | ❌ | ❌ | ✅（一层） |
+ | 相邻兄弟选择器 | 同级、紧邻 | ✅ | ✅ | ✅ |
~ | 通用兄弟选择器 | 同级、后续所有 | ✅ | ❌ | ✅ |
如果你需要我帮你写某种组合选择器（比如：点击按钮后，高亮某区块中的第一个段落），也可以继续告诉我，我可以帮你写出对应的 CSS。