空格是CSS后代选择器的组合符，表示左边元素内部任意层级的后代元素。它匹配所有深度的嵌套关系，如.card p可选中孙子、曾孙级p元素，不可省略或替换为其他空白字符。
空格是后代选择器的组合符，表示“某元素内部任意层级的后代”
在 CSS 中，两个选择器之间的空格不是可有可无的分隔符，而是一个明确的组合符（combinator），它定义了“祖先–后代”关系。只要右边的选择器是左边选择器所匹配元素的**任意深度后代**（儿子、孙子、曾孙……），就会被选中。
-
.card p会匹配<div class="card"><p>文本</p></div>，也会匹配<div class="card"><section><article><p>嵌套文本</p></article></section></div> - 空格不能省略：写成
.cardp就变成一个类名为cardp的元素，语义完全不同 - 必须从右向左理解：
.nav a意思是“所有作为.nav后代的a元素”，不是“所有在a里的.nav”
为什么用空格而不是 >？看 HTML 结构深度是否可控
空格和 > 的核心区别在于是否允许中间存在其他层级。如果你不确定目标元素是不是直接子元素，或者结构本身就有多层嵌套（比如框架生成的 DOM、富文本编辑器输出、CMS 渲染内容），那空格就是更稳妥的选择。
- 常见踩坑：
.menu > li写得再准，下拉菜单里的li也不会生效——因为它们藏在<ul>或<div>里，已不是.menu的直接子元素 - 适合用空格的场景：
.article-content img（文章里所有图片）、#sidebar .widget-title（侧边栏任意位置的标题） - 性能提示：空格选择器需遍历整棵子树，DOM 越深、匹配越慢；但现代浏览器优化较好，日常开发中感知不强
容易误写的三种空格错误
空格看似简单，但新手常因 HTML 结构理解偏差或命名混淆写出无效选择器。
- 把多类名连写当成后代：
.parent.child是“同时有 parent 和 child 类的单个元素”，不是“parent 里的 child 元素”；正确写法是.parent .child（中间有空格） - 忽略标签层级，强行“穿透”：
div p span看似三层，但如果实际 HTML 是<div><span>文本</span></div>，这个选择器就完全不匹配——因为中间缺了p - 空格前后加不必要字符：
.box p（全角空格）、.box\tp（制表符）均无效；CSS 只认标准 ASCII 空格
.article-content p {
line-height: 1.6;
margin-bottom: 1em;
}
/* ✅ 匹配所有在 .article-content 内部的 p，
不管它是在 <section> 里、<blockquote> 里，还是嵌套五层 div 之后 */真正难的不是记住空格的含义，而是每次写之前，先看一眼真实 DOM 结构——特别是当组件来自第三方库或 CMS 输出时，所谓“后代”可能比你想象中更深、更不可控。
立即学习“前端免费学习笔记（深入）”；
