如何在µBlock（uBlock）过滤器中添加CSS类？

嘿，这个问题我之前也碰到过！uBlock确实没有直接提供:add-class()这样的原生操作符，但咱们有两个靠谱的替代方法，完美解决你想要“移除一个类同时添加另一个类”的需求：

方法一：用:style()直接模拟类的样式效果 #

如果ad_wrapper-hidden这个类的作用只是应用一些CSS样式（比如隐藏元素），那咱们可以跳过“添加类”这一步，直接用uBlock的:style()操作符把对应样式写进去。这样既达到了效果，又不用纠结类名的修改。

比如假设ad_wrapper-hidden的核心样式是让元素隐藏，过滤器可以这么写：

example.com##.ad_wrapper:watch-attr(class):remove-class(ad_wrapper-visible):style(display: none !important;)

这种方法的好处是简单直接，不用关心元素原有class的其他内容，适合样式单一的场景。

方法二：修改class属性来添加目标类 #

如果页面的脚本或者其他样式必须依赖ad_wrapper-hidden这个类名本身，那咱们可以用uBlock的属性操作符来直接修改元素的class属性：

推荐写法：追加类（不覆盖原有其他类） #

用:append-attr()操作符给元素的class属性追加新类，注意要在类名前加个空格，避免和原有类名连在一起变成无效类：

example.com##.ad_wrapper:watch-attr(class):remove-class(ad_wrapper-visible):append-attr(class, " ad_wrapper-hidden")

直接替换写法（适合确定元素只有这两个类的场景） #

如果确定这个元素的class只有ad_wrapper和切换的两个状态类，也可以用:set-attr()直接设置完整的class属性：

example.com##.ad_wrapper:watch-attr(class):remove-class(ad_wrapper-visible):set-attr(class, "ad_wrapper ad_wrapper-hidden")

⚠️ 注意：这种写法会直接替换整个class属性，如果元素还有其他类的话会被覆盖，一定要谨慎使用！

备注：内容来源于stack exchange，提问作者sjngm