空格是CSS后代选择器的组合符，表示左边元素内部任意层级的后代元素。它匹配所有深度的嵌套关系，如.card p可选中孙子、曾孙级p元素，不可省略或替换为其他空白字符。

空格是后代选择器的组合符，表示“某元素内部任意层级的后代”

在 CSS 中，两个选择器之间的空格不是可有可无的分隔符，而是一个明确的组合符（combinator），它定义了“祖先–后代”关系。只要右边的选择器是左边选择器所匹配元素的**任意深度后代**（儿子、孙子、曾孙……），就会被选中。

• .card p 会匹配

  文本

  ，也会匹配

  嵌套文本

• 空格不能省略：写成 .cardp 就变成一个类名为 cardp 的元素，语义完全不同
• 必须从右向左理解：.nav a 意思是“所有作为 .nav 后代的 a 元素”，不是“所有在 a 里的 .nav”

为什么用空格而不是 >？看 HTML 结构深度是否可控

空格和 > 的核心区别在于是否允许中间存在其他层级。如果你不确定目标元素是不是直接子元素，或者结构本身就有多层嵌套（比如框架生成的 DOM、富文本编辑器输出、CMS 渲染内容），那空格就是更稳妥的选择。

• 常见踩坑：.menu > li 写得再准，下拉菜单里的 li 也不会生效——因为它们藏在
  或 里，已不是 .menu 的直接子元素
• 适合用空格的场景：.article-content img（文章里所有图片）、#sidebar .widget-title（侧边栏任意位置的标题）
• 性能提示：空格选择器需遍历整棵子树，DOM 越深、匹配越慢；但现代浏览器优化较好，日常开发中感知不强

容易误写的三种空格错误

空格看似简单，但新手常因 HTML 结构理解偏差或命名混淆写出无效选择器。

• 把多类名连写当成后代：.parent.child 是“同时有 parent 和 child 类的单个元素”，不是“parent 里的 child 元素”；正确写法是 .parent .child（中间有空格）
• 忽略标签层级，强行“穿透”：div p span 看似三层，但如果实际 HTML 是 文本，这个选择器就完全不匹配——因为中间缺了 p
• 空格前后加不必要字符：.box  p（全角空格）、.box\tp（制表符）均无效；CSS 只认标准 ASCII 空格

.article-content p {
  line-height: 1.6;
  margin-bottom: 1em;
}
/* ✅ 匹配所有在 .article-content 内部的 p，
   不管它是
在 
 里、
 里，还是嵌套五层 div 之后 */

真正难的不是记住空格的含义，而是每次写之前，先看一眼真实 DOM 结构——特别是当组件来自第三方库或 CMS 输出时，所谓“后代”可能比你想象中更深、更不可控。