后代选择器（空格）匹配所有嵌套层级的后代元素，如.nav a会选中.nav内任意深度的a；子代选择器（>）仅匹配直接子元素，如.nav > a只命中.nav的第一层子a，严格限定层级关系，避免样式穿透污染。
后代选择器（空格）匹配所有嵌套层级，但容易“穿透太深”
写 .nav a 会选中 .nav 内任意深度的 a，哪怕它藏在 div > section > ul > li > a 里。这很省事，但也很危险——比如你只想样式化导航主菜单链接，结果弹窗里的 a、卡片 footer 里的 a 全被染色了。
- 适用场景：内容区块整体样式兜底，如
.article p、.post img，尤其 CMS 输出或用户富文本不可控时 - 性能注意：浏览器需遍历整个子树，
div div div div a这种写法会拖慢渲染 - 易错点：
.class div不是“带 class 的 div”，而是“class 容器里的任意 div”；顺序反了语义就全错
子代选择器（>）只认“亲儿子”，层级必须严格对齐
.nav > a 只匹配 .nav 的直接子级 a，跳过所有孙子及更深层节点。它不认“间接关系”，所以 .nav > ul > li > a 必须每一层都存在且顺序一致，缺一环就失效。
- 适用场景：组件边界清晰、结构稳定时，如导航栏一级项、表单字段组直系 label、列表项直系 icon
- 兼容性没问题：IE7+ 支持，现代项目可放心用
- 易踩坑：JS 动态插入节点（如 modal）后，新元素可能不是原父节点的直接子节点，
>就会失灵
调试时怎么看哪个选择器生效了？
Chrome DevTools 里右键元素 → “Break on attribute modifications” 不实用；更直接的是：在 Styles 面板里，把鼠标悬停在某条 CSS 规则上，旁边会高亮显示实际匹配到的所有元素 —— 这能一眼看出 .sidebar a 是不是误中了侧边栏广告里的链接。
- 临时验证：在控制台输入
document.querySelectorAll('.container p')和document.querySelectorAll('.container > p')，对比返回 NodeList 长度和内容 - 注意特异性：
.nav a和.nav > a特异性相同，谁在后面谁覆盖；但#nav a会压过它们 - 别依赖“看起来像”的结构：DOM 实际层级可能被 JS 或 SSR 框架悄悄改掉，亲眼确认比猜更可靠
什么时候该用空格，什么时候该用 >？关键看 HTML 是否可控
如果结构由你自己完全掌控、组件封装良好、不会随意嵌套，优先用 > —— 精准、不易泄漏、性能略优；如果内容来自 CMS、Markdown 渲染、用户输入或第三方 SDK，用空格更稳妥，否则样式会断层。
- 动态插入场景（如
modal、tooltip）：即使用了>，也要配合属性选择器加固，例如[data-modal] > .content - 混合使用常见：菜单用
.menu > li控制一级项，再用.menu li a统一处理所有链接文字颜色 - 真正难处理的不是语法，而是当父子关系被 fragment、portal 或 shadow DOM 打断时，空格也可能失效 —— 这时候得靠 data 属性或 scoped CSS 来锚定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
