CSS 组合选择符

组合选择符通过多个选择器之间的关系来选中元素：例如「某元素内部的子元素」「紧跟在某元素后面的兄弟」等。掌握它们可以更精确地写样式而不必给每个元素都加 class。

四种关系类型

写法	名称	含义
A B（空格）	后代选择器	A 的任意后代 B
A > B	子选择器	A 的直接子元素 B
A + B	相邻兄弟选择器	紧跟在 A 后面的一个兄弟 B
A ~ B	通用兄弟选择器	A 后面所有兄弟 B

---

1. 后代选择器（空格）

选中「在 A 内部的任意层级」的 B，不限于直接子元素。

.article p {
  line-height: 1.6;
}

#header .nav a {
  color: white;
}

---

2. 子选择器（>）

只选 A 的直接子元素 B，不选「孙子」及更深层。

ul > li {
  margin-bottom: 8px;
}

.menu > li {
  display: inline-block;
}

---

3. 相邻兄弟选择器（+）

选中紧跟在 A 后面的那一个兄弟元素 B（同一父元素、且紧邻）。

h2 + p {
  margin-top: 0;   /* 紧跟在 h2 后的段落不加顶间距 */
}

input:focus + .hint {
  display: block;
}

---

4. 通用兄弟选择器（~）

选中 A 之后的所有兄弟元素 B（同一父元素即可，不必紧邻）。

h2 ~ p {
  color: #555;
}

.checked ~ .content {
  display: block;
}

---

组合示例

/* 只影响 .card 直接子元素中的 p */
.card > p {
  margin-bottom: 0.5em;
}

/* 列表第一项后的所有项 */
li:first-child + li,
li:first-child ~ li {
  border-top: 1px solid #eee;
}

---

小结

• A B：A 内任意后代 B。
• A > B：A 的直接子元素 B。
• A + B：紧跟在 A 后面的一个兄弟 B。
• A ~ B：A 后面的所有兄弟 B。

下一节学习 CSS 伪类：:hover、:first-child、:nth-child 等。