后代选择器总“误伤”其他元素，因为它用空格分隔，匹配任意深度嵌套中满足“祖先→后代”关系的所有元素，如.card p会选中.card内所有层级的p元素。
后代选择器为什么总“误伤”其他元素？
因为后代选择器（空格分隔）会匹配任意深度的嵌套，只要满足“祖先→后代”关系就生效。比如 .card p 不仅选中 <div class="card">
<p>...</p>，还会命中 <code><div class="card">
<section><article><p>...</p></article></section>——哪怕你只想样式化直接描述段落。
<h3>用子选择器 <code>> 限制为“亲儿子”
当你只希望样式作用于**直接子元素**，而非所有后代时，> 是最干净的解法。它不关心语义，只认 DOM 树层级。
-
.card > p：只匹配<div class="card"><p>✔️</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/1050" title="SpeechEasy"><img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6cb2cda2a7638.png" alt="SpeechEasy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/1050" title="SpeechEasy">SpeechEasy</a> <p>SpeechEasy是一种合成语音解决方案，可以让用户从文本生成高质量、易于理解的音频。</p> </div> <a href="/ai/1050" title="SpeechEasy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div>，跳过任何嵌套更深的<p></p> -
.nav > ul > li：精准控制导航菜单的一级、二级结构，避免影响面包屑或页脚列表 - 注意：
>对 HTML 结构强依赖，如果中间插入了<div> 包裹，规则立刻失效 <h3>加类名比加深嵌套更可靠</h3> <p>比起写 <code>article section header h2这种四层后代选择器，直接给目标元素加语义类（如class="article-title"），再用.article-title选择，性能更好、可读更强、也更易覆盖。- ❌ 避免：
article .content .header h2（权重高、难维护、易被结构变更破坏） - ✅ 推荐：
<h2 class="article-title">...</h2>+.article-title - 类名可组合：
.article-title.is-emphasized比article:first-child .title.highlight更可控
什么时候必须用后代选择器？
不是所有场景都能靠子选择器或类解决。当内容由 CMS 或第三方组件动态注入、无法修改 HTML 类名时，适度使用后代选择器仍是必要手段——但要主动收窄范围。
- 用 ID 或唯一类锚定起点：
#main-content p比body p安全得多 - 避免通配前缀：
div p改成.post-body p - 检查浏览器 DevTools 的“Computed”面板，确认样式是否真被你写的那条规则命中，而不是被更宽泛的规则意外覆盖
- ❌ 避免：
