遨游广告过滤规则.docx

/viewthread.php?tid=297575&extra=page%3D1当对广告过滤的效果要求较为苛刻，或者遇到一些脚滑的广告无法通过简单的点击进行过滤，这时我们需要打开“编辑站点过滤规则”对话框，进行规则的手工输入。 为了便于规则编写者快速的生成规则、调试规则，我们为之搭建了一个比较便利的调试环境，典型的调试环境如下： 如图中所示，分为这四部分： 1) 站点规则编辑器。我们通过该对话框对当前的站点规则进行编辑，输入的规则在点击“应用”或“完成”按钮后生效，页面会刷新以查看真实过滤效果。“查看原始页面”按钮可以帮助我们查看原始的网页情况，方便添加白名单规则。 2）过滤日志查看器。在该对话框中我们可以得知被过滤的资源url以及它所匹配的规则。 3）规则添加快捷菜单。该菜单帮助我们快速的生成黑白名单规则，大大提高我们编写规则的效率。使用方法与“手动屏蔽广告”类似，点击需要过滤的广告，选择需要添加的规则即可。 4）开发者工具。如需分析网页结构，分析js脚本文件，我们还有“开发者工具”这一利器。另外两个比较典型的应用是获取资源url和删除广告上方漂浮的阻挡我们点击的遮罩元素。 以上4部分共同构成了过滤规则的编写与调试环境，共同的目的只有一个：方便用户添加过滤规则，提高生成规则的效率。(3)编写过滤规则的语法。 不同型号的枪需要各自特定型号的子弹，广告过滤规则亦然。当前版本支持的4种规则文本格式及其意义如下： 2010/9/29 更新“元素隐藏”规则描述。用户输入的规则文本格式1. 一般匹配规则: 按字符匹配, 忽略大小写, 可使用通配符 * (任意数目的任意字符) 和 ? (1个任意字符). 范例: 无通配符: /ads.js 有通配符: *./ads?/*2. 正则匹配规则: 符合 PCRE 格式的正则表达式. 忽略大小写. 格式符合 js 的 inline regexp 格式: /expression/ 范例: /ads|ad/.*?.swf/ /180x(90|87|48).*?(jpg|gif|png|swf)/3. 白名单规则: 白名单规则通过在前述的一般规则前面添加 | 表示.忽略大小写, 可以使用 * 和 ?通配符. 范例: |/ads/logo.jpg |/add.*4. 注释: 由 ! 号开头的行都视为注释文本, 不作为规则处理. 范例: ! The following is an example of RegExp rule ! /ads|ad/.*?.swf/5. 元素隐藏规则 （2010/9/29更新部分） (1)规则描述： # 注： 为多个域名，以逗号分隔。域名前可带，表示例外，表示这个规则不应用在此域名上(它不会单独使用)。 为空时， 应用到整个站点。 为css选择子。 如: #sohuadcode #div#myid #div.myclass #myid (上面几个规则应用到整个站点) #div#yyy (应用到) ,#div#xxx (应用到,但排除子域) (2)URL匹配的元素隐藏规则描述 # 注：为正则表达式或通配形式书写的URL。 如： /*#sohuadcode //#sohuadcode 处理顺序：白名单始终优先, 黑名单按顺序来* 通过支持“通配符”及“正则表达式”，规则编写者能够写出非常漂亮的规则，有时一两条规则即可过滤整个网站的广告。* 通过书写“元素隐藏”规则，可干净有效的去除页面广告且不会留白。（4）“元素隐藏”规则的网友贡献教程-传送门-/viewthread.php?tid=369613&page=1#pid3733264如何更好的隐藏广告元素隐藏：CSS选择器简介本帖最后由 Rexaar 于 2011-8-5 17:50 编辑M3的广告过滤可以使用CSS选择器过滤页面元素置顶帖介绍的比较简单 这里补充一些原文:W3C css3-selectors水平有限，如有错漏，请指出示例会慢慢补完,如能提供好的示例,请跟帖指出0、M3元素过滤格式CSS选择器过滤页面元素的格式如下1. # a复制代码其中-#”和“aulmaxthon-header-wrapperheaderba+bab这里测试页面依旧是过滤讨论区 - Maxthon3 ? 建议马上加入广告过滤规则在线备份功能！以下将#postlist 记作p,即所有帖子列表,所有帖子的父元素 将#post_3340285记做a1,即楼主贴,其他楼层以此类推. .选择器:e ,f含义: 多元素选择器,同时匹配所有的e元素和所有的f元素,多个元素之间用半角逗号分隔示例:1. # a2,a5,a82. ! 说明:选中a2,a5,a83. ! 效果:2#、5#、8#、被屏蔽复制代码. .选择器:e f含义: 后代元素选择器,匹配e的所有后代中的全部f元素,e和f之间用空格隔开示例:1. # p a2. ! 说明:选中p的所有后代中的全部a3. ! 效果:1#至20#被屏蔽复制代码. .选择器:e f含义: 子元素选择器,匹配e的所有子元素中的全部f元素1. # p a2. ! 说明:选中p的所有后代中的全部a3. ! 效果:1#至20#被屏蔽复制代码. . .以下将#postlist div记作a,即所有的帖子,帖子列表的所有子元素. . .选择器:e + f含义: 直接兄弟元素选择器,匹配紧跟所有e元素的与e同级的f元素(f元素最多只能为1个)示例:1. # a5+a2. ! 说明:匹配紧跟a5元素的与a5同级的a元素3. ! 效果:6#被屏蔽复制代码. .选择器:e f含义: 通用兄弟元素选择器,匹配所有e元素之后的同级的f元素(f元素数量可以大于1个)示例:1. # a5a2. ! 说明:匹配所有a5元素之后的与a5同级的a元素3. ! 效果:6#至20#被屏蔽复制代码. .对父元素、子元素不清楚的可以看这里CSS继承详解/*/3、属性选择器属性选择器通过元素属性来选择元素属性选择器有7个,attr 、attr=value 、attr=value 、attr=value 、attr$=value 、attr*=value 、attr|=value测试页面同上: 点击打开代码简化同上. .选择器:attr含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值为任意值。示例:1. # aid2. !说明:选择所有标签为div的a元素,这些元素具有属性id3. !效果: 1#至20楼被屏蔽复制代码. .选择器:attr=val含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值等于-valvalvalpost_334val94966val4177-val-开头说明:改选择器一般用于匹配语言元素, 例如lang|=zh 能选中 、/*/4、结构性伪类结构性伪类和根据文档树中表明的结构来选择元素、结构性伪类有14个,:root:nth-child(An+B) 、 :nth-of-type(An+B)、:nth-last-child(An+B) 、:nth-last-of-type(An+B)、:first-child(An+B) 、 :first-of-type(An+B)、:last-child(An+B) 、 :last-of-type(An+B)、:only-child(An+B) 、 :only-of-type(An+B)、:empty测试页面同上: 点击打开代码简化同上. .伪类:root含义: 根元素选择器,匹配根元素,对于HTML文档,就是HTML元素, 相当于 *(这个选择器在广告过滤中用处不大)示例:1. !选择文档根元素2. # :root3. !效果:所有元素被屏蔽复制代码. .伪类:nth-child(An+B)含义: 结构性伪类,匹配a元素的父元素的第An+B个子元素(A、B为常数,n为非负整数,0、1、2、3. min(An+B)0 ,以下相同)( 关于An+B的更多示例,详见2L,以下相同)示例:1. # a:nth-child(3n+4)2. ! 说明:匹配a的父元素p的第3n+4个子元素a(3n+4)3. ! 效果:4、7、10、13、16、19#被屏蔽复制代码(-a:nth-childdiv:nth-child(4)2. !过滤divAll的第4个子元素3. !效果:标题广告(第一个div#main)被过滤4.5. # #divAlldiv:nth-of-type(2)6. !说明:过滤divAll的第2个div子元素7. !效果:标题广告(第一个div#main)被过滤 复制代码. .伪类:nth-last-of-type(An+B)含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的倒数第An+B个子元素用法与伪类:nth-last-child(An+B)类似。区别同上. .伪类:first-child含义: 结构性伪类,匹配父元素的第一个子元素,等价于a:nth-child(1)示例:1. # a:first-child2. ! 说明:选中a的父元素p的第一个子元素a13. ! 效果:楼主被屏蔽复制代码示例2:见此贴/viewthread.php?tid=378163. .伪类:last-child含义: 结构性伪类,匹配父元素的最后一个子元素,等价于a:nth-last-child(1)示例:1. # a:last-child2. ! 说明:匹配a的父元素p的最后一个子元素a203. ! 效果:20#被屏蔽复制代码. .伪类:first-of-type含义: 结构性伪类,匹配父元素的第一个子元素,等价于a:nth-of-type(1)用法与伪类:first-child类似。区别同上. .伪类:last-of-type含义: 结构性伪类,匹配父元素的最后一个子元素,等价于a:nth-last-of-type(1)用法与伪类:last-child类似。区别同上. .伪类:only-child含义: 结构性伪类,匹配元素的父元素的唯一子元素,即元素的父元素有且只有一个子元素时,选中这个子元素等价于1. :first-child:last-child2. !或3. :nth-child(1):nth-last-child(1)复制代码示例:待补完. .伪类:only-of-type含义: 结构性伪类,匹配元素的父元素中使用和元素同种标签的唯一子元素,即元素的父元素有且只有一个使用同种标签子元素时,选中这个子元素等价于1. :first-of-type:last-of-type2. !或3. :nth-of-type(1):nth-last-of-type(1)复制代码用法与伪类:only-child类似。区别同上. .伪类:empty含义: 结构性伪类,匹配任意元素,这个元素不包含任何子元素,包括文档节点,即标签中什么都没有,包括空格示例:1. 2. 3. 4. text5. 6. 复制代码1. # div *:empty2. !说明:选择空元素3. !效果:选中复制代码/*/5、否定伪类否定伪类通过非关系来选择元素结构性伪类只有1个:not(a). .选择器:not(a)含义: 否定伪类,匹配所有不是a元素的元素,这里的a必须是一个简单选择器(包括通用元素选择器、标签选择器、类选择器、id选择器、属性选择器和伪类),否定伪类自身不能作为a，即:not(:not()是不合法的 测试页面同上: 点击打开代码简化同上示例:1. # a:not(a1)2. !说明:匹配a元素中所有不是a1元素的元素(1#以外)3. !效果:楼主之外被过滤复制代码/*/6、其他伪类 . .待补完,原文/*/7、伪元素. .待补完,原文only-child.JPG(38.84 KB)nth-of-type.JPG(33.16 KB)关于结构性伪类、否定伪类的更多示例4、结构性伪类、否定伪类结构性伪类和根据文档树中表明的结构来选择元素、结构性伪类有14个,:root:nth-child(An+B) 、 :nth-of-type(An+B)、 :nth-last-child(An+B) 、:nth-last-of-type(An+B)、 :first-child(An+B) 、 :first-of-type(An+B)、 :last-child(An+B) 、 :last-of-type(An+B)、 :only-child(An+B) 、 :only-of-type(An+B)、:empty 测试页面: 点击打开代码简化同1L. .伪类:root含义: 根元素选择器,匹配根元素,对于HTML文档,就是HTML元素, 相当于 *(这个选择器在广告过滤中用处不大)示例:1. !选择文档根元素2. # :root3. !效果:所有元素被屏蔽复制代码. .伪类:nth-child(An+B)含义: 结构性伪类,匹配a元素的父元素的第An+B个子元素(A、B为常数.n为非负整数,n=0、1、2、3.( An+B的值0时,An+B有效;(An+B)的值0时,An+B无效;即以下相同)示例:当A=0,B0时,:nth-child(0n+B)写作:nth-child(B)1. # a:nth-child(3)2. ! 说明:匹配a的父元素p的第3个子元素a33. ! 效果:3#被屏蔽复制代码(-a:root0,B0时, :nth-child(An+B)写作:nth-child(An+B)1. # a:nth-child(3n+4)2. ! 说明:匹配a的父元素p的第3n+4个子元素a(3n+4)3. ! 效果:4、7、10、13、16、19#被屏蔽复制代码1. # a:nth-child(2n+1)2. ! 说明:匹配a的父元素p的第2n+1个子元素a(2n+1)3. ! 效果:奇数#被屏蔽复制代码当A0,B0时, :nth-child(An+B)写作:nth-child(An-|B|)1. # a:nth-child(3n-4)2. ! 说明:匹配a的父元素p的第奇数个子元素a(3n-4)3. !效果:2、5、8、11、14、17、20#被屏蔽复制代码1. # a:nth-child(2n-1)2. ! 说明:匹配a的父元素p的第2n-1个子元素a(2n-1)3. ! 效果:奇数#被屏蔽复制代码当A0时, :nth-child(An+B)写作:nth-child(An+B)1. # a:nth-child(-3n+8)2. ! 说明:匹配a的父元素p的第-3n+8个子元素a(-3n+8)! 效果:2、5、8#被屏蔽复制代码关于A0,B0时, :nth-child(An+B)写作:nth-last-child(An+B)1. # a:nth-last-child(3n+4)2. ! 说明:匹配a的父元素p的倒数第3n+4个子元素a(3n+4)3. ! 效果:4、7、10、13、16、19#被屏蔽复制代码1. # a:nth-last-child(2n+1)2. ! 说明:匹配a的父元素p的倒数第2n+1个子元素a(2n+1)3. ! 效果:奇数#被屏蔽复制代码当A0,B0时, :nth-last-child(An+B)写作:nth-last-child(An-|B|)1. # a:nth-last-child(3n-4)2. ! 说明:匹配a的父元素p的倒数第奇数个子元素a(3n-4)3. !效果:3、6、9、12、15、18#被屏蔽复制代码1. # a:nth-last-child(2n-1)2. ! 说明:匹配a的父元素p的倒数第2n-1个子元素a(2n-1)3. ! 效果:奇数#被屏蔽复制代码当A0时, :nth-last-child(An+B)写作:nth-last-child(An+B)1. # a:nth-last-child(-3n+8)2. ! 说明:匹配a的父元素p的倒数第-3n+8个子元素a(-3n+8)3. !效果:2、5、8#被屏蔽复制代码1. # a:nth-last-child(-2n+1)2. ! 说明:匹配a的父元素p的倒数第-2n+1个子元素a(-2n+3)3. ! 效果:1#、3#被屏蔽复制代码此外还有1. # a:nth-last-child(odd)2. ! 说明:匹配a的父元素p的倒数第奇数个个子元素a(2n+1)3. ! 效果:偶数数#被屏蔽复制代码和1. # a:nth-last-child(even)2. ! 说明:匹配a的父元素p的倒数第偶数个子元素a(2n)3. ! 效果:奇数数#被屏蔽复制代码. .伪类:nth-of-type(An+B)含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的第An+B个子元素用法与伪类:nth-child(An+B)类似。区别:伪类:nth-child(An+B)计算父元素中所有标签类型的子元素伪类:nth-type(An+B)计算父元素中与自身标签类型相同的子元素示例:测试页面:苦力王篮球要求过滤标题广告(第一个div#main),分别用这两种伪类来选择1. # #divAlldiv:nth-child(4)2. !过滤divAll的第4个子元素3. !效果:标题广告(第一个div#main)被过滤4.5. # #divAlldiv:nth-of-type(2)6. !说明:过滤div