假设我们有个页面源码如下:

<div class="contentxxxxx">
<div class="col-md4 col-sm6">
<span>要过滤的子元素</span>
</div>
<div class="col-md4 col-sm6">
<div class="box">
<div class="col-md4 col-sm6">
内容1
</div>
<div class="col-md7 col-sm6">
内容2
</div>
</div>
</div>
</div>

展示出来呢,就是下面这样:

要过滤的子元素
内容1
内容2

我们的预期是要过滤掉“要过滤的子元素”所在的col-md4 col-sm6,这个时候,普通的adblock规则会是这样的:

example.com##.col-md4.col-sm6

一旦你添加后,会发现内容1和内容2也都被过滤掉了……


然后你会考虑,你只需要过滤第一个.col-md4.col-sm6,那么规则改成:

example.com##.col-md4.col-sm6:nth-child(1)

= =实际情况会是,内容1这种相似class的也会被隐藏掉,变成下面这个样子:

内容2

那么为了达到目的,应该如何写规则呢?自动生成肯定是不行了,翻翻Adblock Plus的手册,发现有-abp-has等特别的规则,所以研究后,规则如下:

example.com# #.col-md4:-abp-has(span:-abp-contains(/子元素/))

即可达到预期。核心的规则是-abp-has来判定是否存在,-abp-contains来判定HTML文本是否包含指定字符。合理利用这些过滤符,可以在class相同的情况下,达成元素隐藏过滤的目标。


相关参考:https://help.eyeo.com/adblockplus/how-to-write-filters#elemhide-emulation



Related Posts: Adblock Plus根据标签内容过滤示例 :

留言