正在加载...

CSS 组合器

类型、class、id 选择器你已经会了。还差一项重要能力：有时你不要「所有段落」，只要某个区块里的段落，或列表的直接子元素，或紧跟在标题后面的那一个。这就是组合器的工作。

组合器是什么意思？

组合器是夹在两个选择器之间的符号——甚至可以只是一个空格。它告诉浏览器：这两部分在 HTML 树里必须是什么关系。左边通常是「参照」；右边才是真正拿到颜色和字体的那一方。

四种常用组合器

先记符号，再用短例子体会每一种。

📊 CSS 组合器

名称 符号 简单含义 示例
后代 空格 祖先内部任意深度 article p
直接子元素 > 只往下一层 ul > li
相邻兄弟 + 紧挨着的下一个邻居 h2 + p
通用兄弟 ~ 同级之后任意兄弟 h2 ~ p

后代——两个选择器之间的空格

写 article p 的意思是：凡是某处位于 <article> 内部的 <p>，嵌套多深都算。孙子、重孙也算。

后代 — article 内的段落

css
CSS Code 
article p {
color: #334155;
line-height: 1.6;
}

后代适合什么时候？

当你要给「这个区域里的全部文字」统一外观时：文章里的段落、菜单里的链接。若嵌套很深、样式无意扩散，就改用 >。

直接子元素——>

用 > 只取往下一层。再深一层的元素过不了这条规则。

直接子元素 — 仅列表第一层的项

css
CSS Code 
.menu > li {
list-style: none;
padding: 0.5rem 1rem;
}

脑中举个例子

设想菜单外层有 <li>，里面还有嵌套列表。用 .menu > li 只给外层上样式。若写成 .menu li（带空格），嵌套的也会上色——有时正好，有时是灾难。

相邻兄弟——+

+ 的意思是：在参照紧挨着之后出现的元素，同一父级下，中间不能有别的东西。

相邻兄弟 — 标题后的第一段

css
CSS Code 
h2 + p {
font-size: 1.125rem;
color: #0f766e;
}

常见写法

很多页面希望标题后的第一句稍稍突出。用 h2 + p 就能抓住那个邻居；不必给每个段落单独贴 class。

通用兄弟——~

~ 也要兄弟，但不只是贴着的邻居：凡是符合第二个选择器的每一个后续兄弟都算。

通用兄弟 — 标题后的段落

css
CSS Code 
h2 ~ p {
max-width: 40rem;
}

一句话分清 + 和 ~

  • h2 + p → 只取紧跟在 h2 后面的那一段
  • h2 ~ p → 该 h2 之后每一个同级的 p
    若标题和段落中间插了 div，那段用 + 对不上；~ 仍可命中后面的兄弟段落。

该选哪一个？

  • 某区域内这类元素全都要 → 后代（空格）
  • 嵌套会带来多余样式 → 直接子元素（>）
  • 只要一步之遥的邻居（标题 → 第一段）→ +
  • 标记之后多个兄弟共享外观 → ~
    链条尽量短。选择器太长，HTML 一变就容易断。

自己动手试

  1. 做一个 <article>：里面有 <h2>、一个 <p>、内含 <p> 的 <div>，再在 div 后放一个 <p>。
  2. 写上 article p { color: #334155; }——article 里的两段都应变色。
  3. 改成 article > p { color: #0f766e; }——只剩直接子段落；div 里的 p 不变。
  4. 加上 h2 + p { font-weight: bold; }——只有紧贴标题的那段变粗。
  5. 若想继续：看 h2 ~ p { max-width: 36rem; }——标题后所有同级段落。

常见错误

  • 本该用直接子元素却用了后代——嵌套小部件也被套上样式
  • 以为 h2 + p 能「跳过」中间元素——跳不过；相邻就是贴着
  • 把组合器读反——样式落在右边
  • 用逗号代替组合器（h2, p 是「标题和段落都选」，不是「标题后的段落」）
  • 把 ~ 当成「贴着的邻居」——~ 是同级更后面，不一定是隔壁那一扇门

小结

  • 组合器规定两个选择器在 HTML 里的关系
  • 空格 = 后代（任意深度）；> = 仅直接子元素
  • + = 贴着的兄弟；~ = 任意后续兄弟
  • 样式落在右侧选择器上
  • 选仍能表达意图的最紧符号
  • 在小页面上把空格换成 >、把 + 换成 ~，对照结果

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程