CSS组合选择器

组合选择器通过组合关系定位元素，实现更精确的样式控制。

后代选择器

选中某元素内部的所有后代元素：

/* div 内的所有 p */
div p {
  color: blue;
}

/* nav 内的所有 a */
nav a {
  text-decoration: none;
}

/* 多层后代 */
.container .content .title {
  font-size: 24px;
}

语法：父元素 后代元素（空格分隔）

子代选择器

只选中直接子元素：

/* div 的直接子元素 p */
div > p {
  color: red;
}

/* ul 的直接子元素 li */
ul > li {
  list-style: none;
}

语法：父元素 > 子元素

相邻兄弟选择器

选中紧挨着的下一个兄弟元素：

/* h1 后紧挨的 p */
h1 + p {
  font-size: 18px;
}

/* p 后紧挨的 div */
p + div {
  margin-top: 10px;
}

语法：元素 + 相邻兄弟

通用兄弟选择器

选中后面所有兄弟元素：

/* h2 后面的所有 p */
h2 ~ p {
  color: gray;
}

/* .active 后面的所有 li */
.active ~ li {
  opacity: 0.5;
}

语法：元素 ~ 后面所有兄弟

组合类型对比

多选择器组合

/* 同时选中多个元素 */
h1, h2, h3 {
  color: #333;
}

/* 复合组合 */
.container > .item:hover {
  background: #eee;
}

/* 多条件组合 */
div.card.active {
  border: 2px solid blue;
}

注意：组合选择器权重为各选择器权重之和。

要点总结

• 后代选择器（空格）选中所有后代
• 子代选择器（>）只选中直接子元素
• 相邻兄弟（+）选中紧挨的下一个
• 通用兄弟（~）选中后面所有兄弟

存放路径：articles/CSS/入门/CSS选择器/CSS组合选择器.md