空格匹配“祖先–后代”关系，>匹配“父–子”关系；前者沿parentnode链向上查找任意匹配祖先，后者要求目标元素parentnode必须精确等于前一选择器所指元素。

空格和 > 渲染范围不同，根本原因在于它们匹配 DOM 树路径的方式完全不同：空格是“祖先–后代”关系，> 是“父–子”关系。这个差异不是浏览器“宽松”或“严格”的问题，而是 CSS 规范明确定义的语义边界。

空格匹配的是“向上可追溯的任意祖先”

写 .card p，浏览器对每个 p 元素执行的操作是：沿着 parentNode 链一直往上找，只要途中遇到一个匹配 .card 的祖先（不管隔了几层），就命中。它不关心中间有多少个 div、section 甚至文本节点。

• 常见错误现象：.modal .close 原本只想关掉右上角按钮，结果连弹窗内容里用户贴进去的 <p class="close">xxx</p> 也被误样式化了
• 性能影响：DOM 越深、节点越多，向上遍历成本越高；现代浏览器虽有优化，但在含数百个嵌套节点的富文本区域中仍可观测到轻微延迟
• 调试提示：在 DevTools 中右键目标元素 → “Reveal in Elements panel”，然后手动点开父级，确认你写的那个祖先是否真在路径上——别信直觉

> 只认“直接父节点”，中间插一个就断

.nav > a 要求每个匹配的 a 的 parentNode 必须**精确等于**那个被 .nav 选中的元素。哪怕中间只多一个 li 或一个 DocumentFragment（比如 JS 动态插入时没 append 到真实 DOM），就完全失效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 常见错误现象：下拉菜单用 .menu > li 设样式，但二级菜单实际结构是 <ul class="submenu"><li>...</li></ul>，而这个 ul 并非 .menu 直接子节点，所以 li 不生效
• Flexbox 场景下尤其关键：align-self 和 order 只对 display: flex 容器的**直接子元素**有效，必须用 .flex-container > .item，写成 .flex-container .item 就是徒劳
• 注意语法细节：.a>.b（无空格）是无效选择器；必须是 .a > .b，空格不可省略

组合写法里空格和 > 的优先级不是并列的，而是嵌套的

像 .a > .b .c 这种写法，不是“同时满足 > 和空格”，而是按从左到右结合：先算 .a > .b 得到一组元素，再在这些元素内部找所有后代 .c。它等价于 (.a > .b) .c，不是 .a > (.b .c)。

• 容易混淆的对比：.a > .b .c vs .a .b > .c —— 前者要求 .c 在 .a 的直接子 .b 内部（任意深度），后者要求 .c 是 .a 内任意位置的 .b 的**直接子元素**
• SCSS 中更易踩坑：& > a 编译为 .nav > a，但若写成 & .icon 就变成 .nav .icon（后代），差一个空格，含义翻盘
• 团队协作建议：用 Stylelint 开启 selector-descendant-combinator-spacing 规则，强制空格规范，避免手抖漏格

真正难的不是记住规则，而是在写每一行选择器前，下意识问一句：我此刻需要的是“穿透结构”的宽容，还是“钉死层级”的控制？DOM 结构一旦由第三方库或 CMS 输出，就不再可控——这时候，一个空格，可能就是样式泄露的起点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！