Posts Tagged ‘ css

adblock隐藏规则中的CSS选择器

adblock(官网安装)是我觉得最不可或缺的几个Firefox 插件之一,除了过滤用于广告的帧、脚本、图片、flash等,加快浏览速度之外,元素隐藏则可以隐藏那些恶心的文本广告,清新整洁的互联网使人心情愉悦:),想到一句广告词:痘痘都不见了!

然而,这次却遇到一个极想隐藏又没办法隐藏的广告。因为人家只有一个table,总不至于把所有table都隐藏了吧=_=!

我只好再次打开adblock官网,找到过滤规则写法说明,看看会不会有什么新发现。虽然早就看过,但只是草草概览了一遍,这回认真一看,果然以前漏掉了一个极重要的特性:adblock支持 CSS selector

也就是说,就好像自己就是这个网站的作者,像平常写style sheet一样选择元素,最后由adblock自动在后面加上{ display: none; }。比如:

Click the expand button to read full text…
*
//匹配所有元素

A
//匹配所有名为A的元素

A B
//匹配名为B且包含在A中的元素(B是A的“后代”,包括儿子、孙子……)

A>B
/* 匹配名为B且是A的孩子的元素:
<div>Hello<h1>adblock, <em>I love you!</em></h1></div>
其中,h1是div的孩子,em是div的孙子……
div>h1:匹配
div>em:不匹配
div em:匹配 */

A:first-child
/* 匹配名为A且是其父母长子的元素
<h1><strong>Hello</strong><em>adblock!</em></h1>
其中,strong是长子,em不是
strong:first-child:匹配
em:first-child:不匹配 */

A + B
/* 匹配名为B且是A紧挨着的弟弟的元素
<nl>
<lable>for many reasons:</lable>
<li>1</li>
<li>2</li>
<li>…</li>
</nl>
<h1>I love adblock</h1>
<p>and, I can’t help introducing it to you</p>
nl + h1:匹配
h1 + p:匹配
nl + p:不匹配 */

A[B]
// 名为A且具有属性B的元素

A[B=”C”]
// 名为A且属性B精确地等于C的元素

A[B~=”C”]
/* 名为A且其属性B以空格分隔的多个值中的一个等于C的元素
<div class=”adv blink right_box”>example</div>
div[class]:匹配
div[class=”adv blink right_box”]:匹配
div[class~=”blink”]:匹配
div[class=”blink”]:不匹配
div.adv:匹配 */

A.B
//等价于 A[class~=”B”]

A#B
//等价于 A[id=”B”]

虽然看起来也不是很多,但将上面几种模式组合起来用,效果是很强大的。在实际的例子中,应该不会有隐藏不了的吧:)