- 积分
- 2044
- 最后登录
- 2022-5-8
- 精华
- 0
- 阅读权限
- 50
- 主题
- 118
- UID
- 1251953
- 帖子
- 2471
- PB币
- 259
- 威望
- 176
- 贡献
- 0
- 技术
- 1826
- 活跃
- 635
- UID
- 1251953
- 帖子
- 2471
- PB币
- 259
- 贡献
- 0
- 技术
- 1826
- 活跃
- 635
|
发表于 2013-12-18 19:44:57
IP属地广东
|显示全部楼层
本帖最后由 劳维明 于 2014-6-10 09:40 编辑
IE11 浏览器可使用自带功能CSS样式表+跟踪保护列表可过滤掉大部分广告(非视频广告,会黑屏)
下面以远景为例,分享一下DIY广告过滤一点经验。
首先是CSS样式表。这里有必要先了解一下CSS的一些基本概念。
CSS,全称"Cascading Style Sheets",中文翻译为级联样式表。
要过滤网页中的广告,首先需要定位广告元素的位置,称为选择元素。
网页代码中的最重要的元素之一莫过于div标签,它用来标识CSS单元的位置和层次。
其他常用的标签有:body、script、table、td、span、a、ul、li、link等。
为了区别具有相同标签的不同元素,我们常用class(类)和id(序号)来标识不同的元素,称为选择器。
CSS有两种基本表示方式,基本格式是选择器+属性声明:
第一种:
例如:
- div[class="focus"]{display:none !important;}
复制代码 解析:div为标签,class为选择器,引号内为标识,display为属性,none为属性的值,!important是提高指定样式规则优先级的语法。其他的符号为固定格式。上面这句CSS规则的作用是隐藏类标识为focus的div元素。
多标签多属性的CSS格式如下:
- 标签1[选择器1="标识1"],标签2[选择器2="标识2"],标签3[选择器3="标识3"] {属性1:值1;属性2:值2;属性3:值3;}
复制代码 例如:
- div[class="a_pb"],ul[class="forum_top"],span[id="weixinqr"]{text-align:center;color:red;}
复制代码 这句CSS规则的作用是指定的三个元素中的文本居中对齐,颜色红色。
第二种表示方式,用符号来代替选择器从而简化CSS规则:
class类选择器用符号“.”(英文句号)表示,ID序号选择器用符号“#”(Shift+3)表示:- .类标识{属性:值;}
- 标签#ID标识{属性:值;}
复制代码 例如:
- .focus,
- div#ckepop,
- span#weixinqr,
- {display:none !important;}
复制代码 PS:一个元素一行能使代码更加清晰。
上面介绍了CSS的基本格式要求,下面再介绍一下需要用到的符号的意义
通过对要过滤的广告网页元素,右键“检查元素”,可查看到目标元素对应的网页源码,
请勿使用多线程下载工具下载论坛附件!
细心的朋友可能发现了,有些标签并没有用选择器指定其唯一标识,或者其标识是一组随机字符,每次刷新网页后都不一样了,例如:
- <div> /* 没有指定标识 */
- <script type="text/javascript">
- /*自定义标签云,footer*/
- var cpro_id = "u1353007";
- </script>
- <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript">
- </script>
- </div>
- <div class="hjkyzABF"> /* 标识是随机字符 */
- <div>
- <script type="text/javascript">
- /*论坛-资讯下-960*/
- var cpro_id = "u473858";
- </script>
- <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript">
- </script>
- <img border="0" src="http://cdn.pcbeta.img.inimc.com/static/image/pcbeta/wenzhang.jpg">
- </div>
- </div>
复制代码 变化的东西我们是没有办法的,但是总有某些东西是固定不变的!正所谓你有张良计,我有过墙梯!
我们可以利用已经指定其唯一标识的元素来确定目标元素的相对位置。
这里涉及父级元素、同级元素、子元素这几个概念。
网页代码中,每个元素都包含开始和结束的标识,
开始标识的格式为<标签>,结束标识的格式为</标签>,例如:
- <div class="123">
- <ul>
- <div>内容1</div>
- <li>内容2</li>
- <li>内容3</li>
- </ul>
- </div>
复制代码 内容1、2、3之间互称同级元素,标签“li”相对于标签“ul”,前者为子标签,后者为父标签,标签“ul”相对于标签“div”,前者为子标签,后者为父标签。子标签和父标签是相对而言的,他们之前是包含关系。
父标签和子标签之间相对位置用符号“>”表示:
例如:
这个选择器表示的是class类标识为123的div父元素下的第一个ul元素的第一个li子元素,指的是内容2。
同级元素之间相对位置用符号“+”表示:
- div[class="123"]>ul>div+li+li
复制代码 这个选择器表示的是内容3。
下面再介绍一个强大选择器——“:nth-child()”伪类选择器。
基本格式为:
- 标签:nth-child(序号) /* 标签为可选,可不指定 */
复制代码 例如,指定内容3为目标元素:
- div[class="123"]>ul>li:nth-child(2)
复制代码 这个选择器的缺点是专一性不强,通常一个网站不同页面都有相同类标识的标签时,容易造成误选择。这里可以通过给它指定其它的筛选器来避免这种情况的发生。由于涉及更高级的CSS语法,这里不做讨论。
通过上面的多种方法,我们就可以指定网页中任意位置的广告元素了。
IE的CSS样式表过滤广告的基本原理是网页加载后隐藏,并不会阻止广告元素的加载。
屏蔽广告元素的基本语法是
- 广告元素1,
- 广告元素2,
- 广告元素3
- {display:none !important;}
复制代码 例如:
- /* 新浪 */
- div[id^="ad_"],
- div[class*="adNone"],
- span[class="adNone"],
- div[class^="Ad_"],
- DIV[class*="blk_xlzt"],
- DIV[class*="zhitou"]
- {display:none !important}
复制代码 解释一下上面的符号,/* */是注释内容,可以用于标题或者说明;
*,^为通配符,分别表示任意位置包含指定字符串的标识和开头包含指定字符串的标识。
div[id^="ad_"]表示ID以“ad_”开头的div元素,div[class*="adNone"]表示class标识包含“adNone”字段的div元素。
使用“隐藏”声明来屏蔽广告有时候会造成空白区域,这时可使用以下属性设置来去除空白区域:
- 广告元素
- {height:inherit !important;}
复制代码 意思大致是设置指定元素高度为自适应。
下面是远景论坛的一些广告:
请勿使用多线程下载工具下载论坛附件!
请勿使用多线程下载工具下载论坛附件!
请勿使用多线程下载工具下载论坛附件!
请勿使用多线程下载工具下载论坛附件!
请勿使用多线程下载工具下载论坛附件!
请勿使用多线程下载工具下载论坛附件!
下面给出最终版的过滤远景广告的CSS样式表:2014年6月9日更新
- /* 远景论坛bbs.pcbeta.com */
- /* 2014年6月9日更新 */
- div[id*="cproIframe"], /* 两侧悬浮 */
- div[class="focus"], /* 右下角焦点话题 */
- span[id="weixinqr"], /* 右上角微信二维码 */
- ul[class="forum_top"]+div, /* 首页头部 */
- div[class="bm a_c mtw"], /* 首页中部 */
- div[id*="BAIDU_DUP_wrapper_"], /* 首页底部 */
- div[id="pt"]+div[style]>div[style]+div[style], /* 帖子列表头部 */
- div[id="diynavtop"]+style+div, /* 帖子头部 */
- div[class="a_pt"], /* 帖子1楼头部 */
- div[class="a_pb"], /* 帖子1楼尾部 */
- div[id="ckepop"], /* 帖子分享到 */
- td[class="plc plm"] /* 签名 */
- {display:none !important;}
- div[id="wp"]>style+div /* 首页头部隐藏空白 */
- {height:inherit !important;}
复制代码
也可直接下载附件:
远景去广告CSS样式表_20140609.zip
(529 Bytes, 下载次数: 751)
请认真研读该CSS规则,读懂上面的每一条后,基本上屏蔽所有网站的广告不成问题。
通过IE选项的辅助功能加载css样式表,重启浏览器生效:
请勿使用多线程下载工具下载论坛附件!
下面介绍使用跟踪保护列表tpl来过滤广告:
TPL跟踪保护列表是网页加载前拦截,在这一点上比CSS优胜,缺点是会留下大量空白框。
下面网站可供自定义跟踪保护列表内容:
http://tpl.aregg.com/new
1. 点击新建TPL,规则格式为
- msFilterList
- : Expires=4
- #标题
- -d 域名 广告元素
复制代码 说明:msFilterList表示这是一个规则文件,Expires规则更新间隔,#表示该行是注释行,下面是具体的规则内容。
-d,前面的减号表示这是一个阻止的规则,d表示后面的内容里包括域名信息,-d就代表:阻止该域名(及其域名后面显示的子字符串)内容;可使用通配符*。
+d,代表允许该域名内容通过,若同一个域名分别出现在允许和阻止规则中,那么允许规则的优先级高于阻止。
“- 广告元素”表示全局拦截指定广告元素,而不是在某一特定网站。
跟踪保护列表通常用于拦截一些JS脚本文件,广告图片等。
例如:
- msFilterList
- : Expires=4
- #77电视
- -d media.8jkx.com /0/361.js.php
- -d media.8jkx.com /0/359.js.php
复制代码
2. 然后填写名称和密码后点击提交!
请勿使用多线程下载工具下载论坛附件!
3. 最后安装TPL:
请勿使用多线程下载工具下载论坛附件!
4. 下面给出过滤远景广告的TPL:
- msFilterList
- : Expires=30
- #远景
- -d cpro.baidu.com
- -d cpro.baidustatic.com
复制代码
大家不要小看上面两条跟踪保护列表规则,它具有普遍适用性,能过滤掉百度广告联盟的大部分广告,如果你在广告的右下角看到有个百度的脚印小标志,那就是百度广告联盟的广告,上面两条跟踪保护列表规则就能干掉他。通常一些两侧悬浮广告也是百度广告联盟的广告,同样适用。
CSS样式表屏蔽广告和TPL跟踪保护列表过滤广告两种方式均能独立过滤掉远景的全部广告内容。
两者结合更好。单独使用也可。
下面是过滤后的效果:
请勿使用多线程下载工具下载论坛附件!
请勿使用多线程下载工具下载论坛附件!
请勿使用多线程下载工具下载论坛附件!
请勿使用多线程下载工具下载论坛附件!
这里提供一下大名鼎鼎的Easylistchina+Easylist跟踪保护列表,能够过滤掉绝大部分广告,结合上面的自定义规则,就能做到无一漏网之鱼了。
Easylistchina+Easylist.zip
(461 Bytes, 下载次数: 804)
使用说明:用IE打开Easylistchina+Easylist.htm,点击Easylistchina+Easylist添加即可。
|
-
13
查看全部评分
-
|