用广告拦截器隐藏干扰元素：常用思路和语法介绍
内容提要
本文介绍了广告拦截器中「修饰规则」的基本原理和常用制作思路，包括使用CSS选择器屏蔽特定页面元素。
延伸解读
修饰规则与基础规则的分工
广告拦截器的规则分为基础规则和修饰规则。基础规则针对文件地址，阻止广告资源加载，能保护隐私；修饰规则针对页面元素，将其隐藏，适合处理位置有规律但URL特征不明显的干扰元素。对于同时包含文本和媒体、与正文穿插的干扰元素，修饰规则更实用，能实现“眼不见心不烦”的效果。
为什么元素选择器工具常产生“废话规则”
广告拦截器自带的元素选择器虽然方便，但往往机械复制所选元素的属性，生成晦涩冗杂的规则。这些规则只对当前页面有效，缺乏代表性，容易随网站更新失效。因此，更推荐使用浏览器开发者工具（DevTools）的检查器功能，手动分析元素特征，编写更具通用性的规则。
利用属性值片段匹配避免规则失效
许多网站的class名包含随机字符串（如__LvD17），直接使用完整类名会导致规则很快失效。CSS选择器支持匹配属性值的片段，例如[class^=value]匹配开头，[class*=value]匹配任意位置。这样可以用较短的稳定部分来选中元素，提高规则的持久性。但需注意平衡具体性，避免误伤或需要多条规则。
识别干扰元素的常用属性关键词
编写屏蔽规则时，可关注class或id中与功能相关的关键词，如ad、promo、popup、cta，以及与形态相关的video、banner、carousel。避免使用布局类名称如row-span-2、col-md-6，它们随版面调整易失效。此外，data-ad-type、data-ad-zone、role、src、href、aria-label等属性也常有助于识别干扰元素。
Q&A
广告拦截器的修饰规则是什么？它和基础规则有什么区别？
修饰规则（cosmetic rules）也称隐藏规则，是针对特定页面元素的，目的是将页面上广告所在部分隐藏起来，适合屏蔽不易通过URL特征区分但位置有规律的元素。基础规则（basic rules）则是针对特定文件地址的，让广告所需数据无法加载，更适合屏蔽URL特征明显的广告资源文件、跟踪脚本，且只有基础规则能保护隐私。
为什么仅安装广告拦截器往往达不到理想效果？
因为广告拦截器依赖的规则集由社区维护，质量参差不齐，人气高的规则也会积累冗余和错误，贪多求全容易拖累性能、导致误伤。而且什么内容应当被屏蔽非常主观，完全符合个人需求的规则集很难找到现成的，即使针对恼人元素的规则集也只保守覆盖了一小部分干扰元素，要真正取得理想效果需要自己动手写规则。
修饰规则的基本格式是什么？它是如何工作的？
修饰规则的一般格式是 example.org##selector，其中 ## 之前是规则针对的域名，之后是要屏蔽元素的表达式。其工作原理是向当前页面注入一条针对选中元素的样式 display: none !important，即让该元素不显示，忽略所有相反规定。
为什么推荐用浏览器开发者工具而不是广告拦截器的元素选择器来编写规则？
广告拦截器的元素选择器往往只会机械地复制所选择元素的属性，生成晦涩冗杂、过于具体的规则，只对当前页面有效，缺乏代表性。而浏览器开发者工具（DevTools）的检查器功能可以查看页面元素的树状结构（DOM），更灵活地分析元素特征，从而写出更有代表性的选择器。
如何按class或id屏蔽网页元素？有哪些常用关键词？
按class和id屏蔽元素的语法分别是 .value 和 #value，其中value为class或id的值。选择值时可关注与功能相关的关键词如 ad、promo、popup、cta，以及与形态格式相关的关键词如 video、banner、carousel。避免使用像 row-span-2、col-md-6 这类CSS框架生成的布局类名，它们不够有针对性且容易失效。
当class名包含随机字符串时，如何编写有效的屏蔽规则？
可以使用CSS选择器的属性子字符串匹配语法： [class^=value] 匹配开头， [class$=value] 匹配结尾， [class*=value] 匹配任意位置包含。例如对于类名 inlineoffer_inline-img-offer-container__LvD17，可以用 [class^=inlineoffer] 或 [class*=inline-img-offer-container] 来选中。在括号前加 i 可使匹配大小写不敏感。
除了class和id，还有哪些属性有助于识别干扰元素？
其他有助于识别干扰元素的属性包括 data-ad-type、data-ad-zone、data-test-id、role、src、href、aria-label 等。例如可以用 [data-test-id="right-hand-rail-ads"] 来屏蔽The Economist页面上的广告元素。
