[-Fx-] 簡介Adblock Plus(三):隱藏規則

[knight00931 (讀書人的氣質)]

參考資料：http://adblockplus.org/en/filters

其實 Wladimir Palant 另一個廣為人知的套件 Element Hiding Helper for Adblock
Plus 就已經可以解決九成以上的問題了，只有極少部分還是需要手動修改，這也是寫這
篇的原因。
套一句經濟老師的話，這東西相當nice，不想寫規則就直接安裝它吧！
https://addons.mozilla.org/zh-TW/firefox/addon/4364/

Q:撰寫規則需要什麼東西？
神器Firebug足矣，不過需要注意的是Firebug預設的快捷鍵與ABP和element hiding
helper的快捷鍵相衝，記得到工具=>Firebug=>客製化快捷鍵將 Ctrl+Shift+E /
Ctrl+Shift+K 給替換掉。
※本篇提到CSS的部份若有錯誤還請不吝指教 orz

當網頁上出現文字廣告則或找不到檔名的規律性就可以用隱藏規則，不過隱藏起來的區塊
日後若有更新也不會發現，可以的話定期檢查最好，請慎用。

隱藏規則以##開頭而成，前面可以加上需要限定或者例外的網域，先來看看官網的例子：

<div class="textad">
Cheapest tofu, only here and now!
</div>
<div id="sponsorad">
Really cheap tofu, click here!
</div>
<textad>
Only here you get the best tofu!
</textad>

要隱藏第一個廣告，可以寫下##div.textad
其中div是指div標籤，如果他用的是<span class="textad">則可改寫成##span.ad
那個 "." (點)則代表的是class選擇器。

而第二個廣告則可用##div#sponsorad來隱藏
和上面一樣，div指的是div標籤，而sponsorad前面的 "#" 則表示id這個選擇器
常見的就是id與class，分別對應 "#" 及 "."

而最後一個廣告是他自己定義的標籤，直接寫下##textad即可，沒有div標籤及id、class
等選擇器。

<屬性選擇器>

然而不是每個地方的廣告都有id和class，這時候你就需要利用其他的屬性來隱藏。比如：
<table width="80%">
...
</table>
就可以寫下##table[width="80%"]來將其隱藏。

同理，如果同時有多個屬性如<table width="80%" height="300">，則
##table[width="80%"]
##table[height="300"]
##table[width="80%"][height="300"]
都會匹配到上面這個table。
通常指定的屬性越多"比較"不容易隱藏到其他部分有相同屬性的標籤。
不過凡事總有例外，當每個屬性都一樣的時候就需要稍微修改，也就是文章開頭所提到需
要修改的部份，詳見註1。

<網域限制>

不是每一條隱藏規則都能正確用在每一個網站，這時候就需要限制網域了。
這部份相當簡單，在##前方加上網域即可，如：

example.com##div#ad 則該規則只會在example.com及其子網域生效。
~example.com##div#ad 表示該規則會在example.com及其子網域以外的"所有網域"生效，
基本上可以當成全域規則看
example.com,~blog.example.com##div#ad 該規則只會在example.com和其子網域生效，
但不會在blog.example.com作用，非全域規則


<匹配屬性開頭的選擇器>

當你看見許多屬性開頭一樣的標籤時可以不必一條一條寫，如：
<div id="ad1">
ads here!
</div>
<div id="ad2">
ads here,too!
</div>
<div id="ad3">
ads here,three!(?!)
</div>

如此不需要寫下##div#ad1,##div#ad2,##div#ad3
只要寫成##div[id^="ad"]即可
這種選擇器要怎麼用？
##div[id^="ad"]會匹配ad開頭的id，如<div id="ads">
##div[id$="ad"]會匹配ad結尾的id，如<div id="thisisad">
##div[id*="ad"]會匹配任何含有ad二字的id，如<div id="header">，需要注意的是這
非常容易誤擋，舉凡header,advance,upload之類的單字都可能一起被幹掉，慎之，慎之。

當然也沒有一定要div和id的組合，可以替換到任何屬性，如：
<table style = "border: 1px solid #F3E58A; padding: 12px;">也就可以寫成
##table[style^="border: 1px solid #F3E58A;"]
甚至##table[style^="border: 1px"]都行，反正"^"只是用來匹配開頭而已。

基本上到這裡就夠用了，有興趣的再往下看，感謝。

註1:
<table width="120" height="200" border="0">
我不是廣告
</table>
<table width="120" height="200" border="0">
我才是廣告
</table>
<table width="120" height="200" border="0">
我也不是廣告
</table>

然而只用##table[width="120"][height="200"][border="0"]會把這三個一次隱藏起來，
這時候可以在規則後方加上:nth-child(n)來指定第幾個元素
我們的目標是第二個，就可以寫下
##table[width="120"][height="200"][border="0"]:nth-child(2)
基本上就不容易隱藏到有用的內容。

nth-child(n)是什麼？
nth-child(n)是用來匹配父元素中的第n個子元素
類似用法還有:
first-child，表示父元素中的第一個子元素
last-child，表示父元素中的最後一個子元素
nth-last-child(n)，用法與nth-child(n)相同，只是從後面數起第n個元素

舉個例子才不會眼花：
<table>
    <div id="content">  <=##div#content:first-child
    我是老大
    </div>
    <div id="content">  <=##div#content:nth-child(2) 或
    我是老...           <=##div#content:nth-last-child(3)
    </div>
    <div id="content">  <=##div#content:nth-child(3) 或
    我是老三            <=##div#content:nth-last-child(2)
    </div>
    <div id="content">  <=##div#content:last-child
    我是老四
    </div>
</table>

但單純使用這類匹配子元素的選擇器還是有風險，若有好幾個父元素裡頭都有id為
content的div標籤，也會一起被隱藏起來。

這時候再加上子選擇器 ">" 或相鄰選擇器 "+" 就萬無一失了。
何謂子選擇器？
<div id=test>
    <table>     <=##div#test>table:first-child
    ...
    </table>
    <table>     <=##div#test>table:nth-child(2)
    ...
    </table>
</div>
在<div id="test">裡面的第一個table才會符合##div#test>table:first-child

何謂相鄰選擇器?
子選擇器是上下層的概念，而相鄰選擇器則是用在同一層
<table width="100">
    <div>
    ...
    </div>
    <table>  <=##table[width="100"]>div+table 或
    ...      <=##table[width="100"]>div+table:nth-child(2)
    </table>
    <div>    <=##table[width="100"]>div+table+div 或
    ...      <=##table[width="100"]>div+table+div:last-child
    </div>
</table>

註2:為何列表中許多隱藏規則都不指定div等其他標籤，直接寫example.com###ad？
請參考https://developer.mozilla.org/en/Writing_Efficient_CSS
Don’t qualify ID Rules with tag names or classes
If a rule has an ID selector as its key selector, don’t add the tag name to
the rule. Since IDs are unique, adding a tag name would slow down the
matching process needlessly.

Don’t qualify Class Rules with tag names
The previous concept also applies here.  All class names are unique.
當id及class為唯一時不指定標籤可提高效率，我想以ABP的隱藏規則而言應該是一樣有效
的，請參考"How does element hiding work?"
(http://adblockplus.org/en/faq_internal#elemhide )


--
教授不要一直講一些五四三的啦!  ◢教授◣                  Q ◢教授◣ 二一。      
         ◢學生◣  五四三的啦!        ◥ 國際經濟的探討  S        ◥◢國際經濟的
              ◥◥  五四三的啦!          ╱              W        =+ 沒錯就是你 
               ─ (哈欠)       ◥      ◢                E ◥     ▼  被二一的  
         ◥     ◢              ◢██◣                 E  ◢██◣   就是你   
         ◢██◣                                        T          咩居克˙泡爾

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.126.29.105
推 DCaty:未看先推！
推 Kenqr:推！
推 hpo14:推!
推 DCaty:閱畢 屬性選擇器那邊有字誤 weight
感謝 orz 打到昏頭
推 bunjie:推!
※ 編輯: knight00931     來自: 59.126.29.105        (09/22 18:22)