后代选择器“抓太多”因匹配任意嵌套层级的元素；应优先用子选择器>限定直接子级，再结合语义化类名（如.card > .card-title）实现精准控制。
后代选择器为什么总“抓太多”？
因为 div p 这类后代选择器会匹配 div 内任意层级的 p，哪怕嵌套了 5 层也照单全收。实际开发中，你往往只想要“直接孩子”或“某类特定上下文里的段落”，结果样式被意外覆盖，调试时发现改了 A 却影响了 B。
用子选择器 > 锁定直接子元素
把 div p 换成 div > p，就只匹配 div 的**一级子级** p，跳过 div > section > p 这类深层结构。
注意点：
-
>前后必须有空格，写成div>p会失效 - 它不解决“多个 div 都匹配”的问题，只是收紧嵌套深度
- IE6 不支持，但现代项目基本可忽略
加类名限定语义范围，比依赖 DOM 结构更可靠
与其靠 article p 匹配所有文章段落，不如给目标段落加明确类名：<p class="article-intro"></p>，再用 .article-intro 精准控制。
立即学习“前端免费学习笔记（深入）”；
这样做的好处：
- 避免因 HTML 结构微调（比如加了个
<section></section>）导致样式断裂 - 多人协作时，类名比“第几个子元素”更容易理解意图
- 方便后续用 JavaScript 通过类名操作元素，不用遍历 DOM 树
组合使用：子选择器 + 类是最小安全单元
真正稳健的写法是两者结合，例如：
.card > .card-title
这表示“只作用于 .card 的直接子元素中带 .card-title 类的那个”。既防深嵌套误伤，又防同级其他元素干扰。
容易忽略的一点：如果父容器本身是动态插入的（比如 Vue/React 组件），确保类名在渲染完成后再应用——否则 CSS 规则可能因元素暂未挂载而“看起来没生效”。
