CSS 组合器

CSS 选择器组合器详解 · 难度：进阶 · +15XP

CSS 选择器组合器详解

CSS 组合器（Combinators）用于描述选择器之间的关系，让你能够精确地选择 DOM 树中特定位置的元素。CSS 有四种组合器：后代、子代、相邻兄弟和通用兄弟。

四种 CSS 组合器

后代选择器（空格）

使用空格分隔的选择器匹配所有后代元素（子、孙、曾孙...）。

/* 匹配 .container 内的所有 p 元素（包括深层嵌套） */
.container p {
  line-height: 1.8;
  color: #333;
}
/* 匹配 nav 内的所有 a 标签 */
nav a {
  text-decoration: none;
  color: white;
}
/* 深层匹配 */
article .content .highlight {
  background: yellow;
}

子代选择器（>）

> 只匹配直接子元素，不匹配更深层的后代。

/* 只匹配 .menu 的直接 >li，不匹配子菜单的 li */
.menu > li {
  display: inline-block;
  position: relative;
}

/* 子菜单中的 li 使用后代选择器 */
.menu li li {
  display: block;
}
/* 只选择紧贴卡片的直接子标题 */
.card > h3 {
  margin-top: 0;
  color: #2c3e50;
}

相邻兄弟选择器（+）

+ 选择紧跟在指定元素之后的第一个兄弟元素。

/* 相邻卡片之间的上间距 */
.card + .card {
  margin-top: 20px;
}

/* h2 后面紧跟的第一个 p */
h2 + p {
  font-size: 1.1em;
  color: #666;
  margin-top: 0;
}
/* label 紧跟着的 input */
label + input {
  margin-top: 4px;
}

通用兄弟选择器（~）

~ 选择指定元素之后的所有兄弟元素。

/* h2 之后的所有 p 兄弟 */
h2 ~ p {
  color: #555;
}

/* 第一个 .item 之后的同类 */
.item.selected ~ .item {
  opacity: 0.5;
}
/* 复选框切换显示内容 */
input[type="checkbox"]:checked ~ .toggle-content {
  display: block;
}

组合器对比示例

/* HTML 结构 */
/* <div class="box"> */
/*   <p>直接子p</p> */
/*   <div> */
/*     <p>嵌套p</p> */
/*   </div> */
/*   <p>相邻兄弟p</p> */
/*   <p>通用兄弟p</p> */
/* </div> */

.box p { }          /* 匹配所有 4 个 p（后代） */
.box > p { }        /* 匹配 2 个直接子 p */
div + p { }          /* 匹配 "相邻兄弟p" */
div ~ p { }          /* 匹配 "相邻兄弟p" 和 "通用兄弟p" */

组合器速查表

???? 练习

1. 使用子代选择器 > 为导航菜单的第一层 li 设置样式，不影响子菜单
2. 使用相邻兄弟选择器 + 为卡片列表设置统一的间距
3. 使用通用兄弟选择器 ~ 实现纯 CSS 的复选框切换效果
4. 对比后代选择器和子代选择器的区别，在嵌套列表中验证
5. 组合使用多种选择器为一个博客文章页面设置精确的排版样式