CSS选择器误伤广告位的根本原因是使用无上下文约束的全局规则（如[class*="ad"]）匹配DOM，导致广告容器被错误隐藏；修复关键在于停止删除、改用ID隔离或沙箱iframe包裹。
直接说结论：CSS选择器误伤广告位，根本不是“选得太宽”，而是你用了无上下文约束的全局规则（比如 [class*="ad"] 或 div[style*="fixed"]）去匹配 DOM，结果把广告容器本身当成了“要干掉的对象”。修复的关键是停止删除、改用隔离，且必须区分广告是否可控。
为什么 [class*="ad"] 会删掉自己的广告容器
这类属性选择器不看语义、不辨来源，只要 class 属性里含 "ad" 就触发。而很多广告 SDK 会主动给外层容器加 class="ad-banner" 或 data-ad-id——你本意是屏蔽广告内容，结果先把自己挂载广告的 <div id="ad-slot"></div> 给 display: none 了。
- 常见误伤现象：广告位空白、控制台报
Cannot read property 'appendChild' of null（因父容器被删） - 比 class 更危险的是内联样式匹配：
div[style*="position: fixed"]会干掉你自己的悬浮按钮、回到顶部组件 - 伪类如
:nth-child(2n)在广告动态插入后可能错位重排，导致后续元素样式批量失效
广告可控时：用唯一 ID + all: unset 硬隔离
如果你能控制广告加载方式（例如手写 <div id="ad-7f2a"></div> 并用 JS 注入），就别碰选择器逻辑，直接切作用域：
- 给广告容器设唯一 ID：
<div id="ad-7f2a"></div>（避免用 class，广告脚本可能自带同名 class） - 在 CSS 中强制重置：
#ad-7f2a { all: unset; font-family: system-ui; } - 再手动恢复必要样式：
#ad-7f2a img { max-width: 100%; height: auto; }、#ad-7f2a iframe { width: 100%; height: 250px; } - 注意：
all: unset不重置direction和unicode-bidi，多语言广告需额外补#ad-7f2a { direction: ltr; }
广告不可控时：必须用 <iframe sandbox>，别信 CSS 权重
运营商劫持、SDK 动态注入、GPT 托管广告——这些你连 HTML 都看不到，提高选择器权重或加 !important 完全无效。它们要么走独立 <iframe>，要么注入内联 style，权重天然碾压你所有外部规则。
立即学习“前端免费学习笔记（深入）”；
- 有效做法只有一条：用沙箱 iframe 包裹广告入口，src 指向你可控的中间页（如
/ad-proxy.html?id=7f2a） - sandbox 属性至少包含
"allow-scripts allow-popups"，**严禁加allow-same-origin** - 外层容器必须设固定尺寸 +
overflow: hidden，否则广告 JS 可能通过document.body.style.height = "9999px"撑开布局 - 别试图用 CSS-in-JS 或 scoped style 控制它——广告的
<style>标签一执行，就已进入 document 全局 scope
查错时优先看 Computed，别猜选择器
当你发现广告位异常，第一反应不该是“我哪条规则写错了”，而是打开 DevTools → 选中广告容器 → 切到「Computed」面板，搜 display、visibility、height。如果看到某条规则来源是 user agent stylesheet 或 Zeus AdBlock，说明问题出在浏览器扩展或广告过滤模块，和你的 CSS 文件无关。
- 若 display 是
none且来源为自定义 CSS，则用「Styles」面板点开那条规则，往上翻看是否被[class*="ad"]类选择器命中 - 若 height 是
0px且无显式设置，检查是否被div[style*="height: 0"]这类激进规则拦截 - 广告区域空白但 DOM 存在？大概率是
z-index被劫持广告覆盖——这时该查网络请求里有没有被 block 的字体或图标资源，而非调大自己 z-index
真正难处理的从来不是怎么写对选择器，而是得同时应付三套样式系统：你写的、第三方库注入的、浏览器扩展偷偷塞的。隔离比对抗可靠，ID 比 class 稳定，iframe 比权重实在。
