找回密码
 加入傲游社区
跳转到指定楼层

[规则分享] 广告猎手FAQ & 内容过滤教学 & CSS隐藏基础教学

[复制链接]
本帖由 admin [管理员] 发表于 2015-12-8 16:14:35 | 显示全部楼层 |阅读模式  4986 7
目录

1楼——目录
2楼——新手入门 & FAQ (参照自:http://bbs.maxthon.cn/thread-600-1-1.html
3楼——内容过滤教学
4楼——CSS隐藏基础教学

传送门:
●简易教程:傲游3广告过滤功能简明教程
●进阶教程▼
    ①正则规则:
    ②元素隐藏规则▼
       ⑴入门:如何更好的隐藏广告——元素隐藏:CSS选择器简介
       ⑵高级:
CSS 教程

最后,如果对本帖中的教学有疑问或者不懂,欢迎发帖求助。

另外,请不要经常发表关于过滤功能改进的帖子,毕竟术业有专攻,开发姐姐们要兼顾的事情还是很多的,没法像 ADB 的作者那样专注于把过滤功能做好做强。
所以,必要时自己也动动手吧。[:good_mood:]






MX广告过滤讨论QQ群:2464693

对于过滤技术有疑问的欢迎进群讨论,求规则的勿进,请在论坛发帖求规则。
评论
精彩评论 ( 7条 ) 跳转到指定楼层
本帖由 admin [管理员] 发表于 2015-12-8 16:32:10 | 显示全部楼层
新手入门&FAQ

以下FAQ参照于:http://bbs.maxthon.cn/thread-600-1-1.html
感谢 咿尔布格-凡 提供的资料和素材

=====FAQ=====

  • 过滤规则的分类
  • 过滤模式的分类以及工作原理
  • 浏览模式与广告猎手的工作状态 (〓〓〓 广告猎手按钮变灰色, 无法过滤广告的人请看这里 〓〓〓)
  • 广告猎手菜单的简介
  • 用户过滤规则的使用
  • 订阅过滤规则的使用 & 订阅过滤规则的更新 & 订阅规则显示为空白(订阅规则无法更新)的解决办法
  • 关于通信运营商DNS劫持广告
  • 关于恶意插件引发弹窗广告
  • 元素隐藏功能是否支持规则白名单? 能不能豁免全局过滤中的隐藏元素规则?
  • 备份/恢复 用户自定义规则文件
  • 广告过滤用户规则同步失败的原因?


1、过滤规则分两类
第一种为订阅过滤规则,属于官方推送的过滤规则(详见FAQ.6),文件位于 %appdata%\maxthon3\pubilc\ADFilter 。
第二种为用户过滤规则,属于用户自定义的过滤规则,文件位于 %appdata%\maxthon3\users\用户目录\ADFilter 。
PS: 便携版文件在软件目录下的 Userdata 内.
过滤规则优先级: 用户规则(站点规则) -> 订阅规则(站点规则) -> 订阅规则(全局规则), 黑白名同一单原理


2、过滤模式的分类及工作原理
1. 内容过滤模式,即传统的URL拦截,通过URL匹配来拦截某个 网页/图像/媒体/Flash/Iframe/.JS/.CSS 等页面元素。
拦截是在元素被下载之前进行的,因此被拦截的元素将不会产生流量。
PS.1: 图像文件可被拦截,但是依旧会被缓存,因此依旧会产生流量。
PS.2: 背景图像无法被拦截 (例: CSS中 background-image 属性的背景图像)。
PS.3: URL拦截不能造成某个网站无法访问,只能拦截相应网页中的页面元素。
例: *.baidu.com* 这一条规则,不管是添加在全局规则亦或是 baidu.com 的站点条目下,都不影响访问 baidu.com,但会使得该网站中 "文字" 以外的页面元素都无法查看。

2. CSS隐藏模式,即通过浏览器对网页添加 UserCSS 来隐藏网页中某一处的内容。
CSS隐藏是在页面元素加载时进行的,浏览器在渲染页面内容时,通过CSS对元素隐藏。
被隐藏的元素依旧会被浏览器所缓存,因此依旧会产生流量。


3、浏览模式与广告猎手的工作状态
在浏览器的地址栏右方,会有一个浏览模式图标,点击此图标可进行浏览模式切换。
而浏览器右下方会有一个广告猎手的工作状态图标,广告猎手目前仅能工作于极速模式,兼容模式下将不过滤任何广告。
极速模式:极速模式下显示的图标为黄色闪电 12022711440c1af504785f6f9c.png ,此时广告猎手将处于工作状态 12022711448670ee63e6eabdc4.jpg ,但是也有启用但不工作的时候 12022711443986bdd490c7fe62.jpg ,此状态为不过滤本站广告(详见FAQ4.3)。
兼容模式:兼容模式下显示的图标为蓝色方块 1202271144592e15747ef04228.png ,此时广告猎手将不工作 1202271144e46e79da5d7109e7.jpg
关于弹窗拦截:弹窗拦截也只能工作于极速模式,但是此功能的启用状态并不会显示在图标上,
PS: 不同的浏览器皮肤,这一些状态显示的图标也会不同。



Q4、广告猎手菜单的简介
A4:
1. 查看广告过滤日志
2. 启用弹窗拦截:弹出窗口拦截功能。
3. 过滤本站广告:如果不勾选此功能,广告猎手将不工作(弹窗过滤除外)。
4. 订阅过滤规则:订阅过滤规则的启用选项。
5. 编辑过滤规则:打开用户过滤规则编辑界面的主要途径,同时也能查看到订阅过滤规则的内容,但无法编辑订阅过滤规则。
6. 手动过滤广告:提供给一般用户用于过滤网页/图像/媒体/Flash/Iframe 等页面元素,但因为此功能有BUG变成了鸡肋(详细可以见视频自己对比)。
1202271205972819d7bc27df0c.jpg



Q5、用户过滤规则的使用
A5:前面提到过,过滤模式主要分两种,更详细的可以见3楼与4楼的内容
12022715379f8397e98401b5fb.jpg



Q6、订阅过滤规则的使用 & 订阅过滤规则的更新 & 订阅规则显示为空白(订阅规则无法更新)的解决办法
A6:订阅过滤规则与用户过滤规则最大的区别在于, 订阅过滤规则带有全局过滤的功能, 而用户过滤规则没有.
另外, 用户是无法去编辑订阅的过滤规则, 因此遇到误过滤, 建议立刻发帖反馈.

订阅过滤规则的更新
不管订阅过滤规则是否处于启用状态,在浏览器的启动时便会检查更新。那如何确定规则是否有更新呢?见下图。
PS: 一般建议等待10秒后再检查
120227143490430e7168c03be6.jpg

关于遇到订阅过滤规则无法更新的解决办法
删除规则本地缓存步骤:
1、开始->运行(Win键+R)输入:%appdata%\maxthon3\Public\  回车,删除 AdFilter 中的文件
2、开始->运行(Win键+R)输入:%appdata%\maxthon3\Users\  回车,删除 用户账户目录\SvrInfo 中的文件
如果使用便携版,则文件位于软件目录下的 Userdata 目录。
注!!!必须是删除对应文件夹中的文件,不能是删除文件夹,否则有可能会出现浏览器无法重新创建缓存文件。


Q7、关于通信运营商DNS劫持广告(请直奔5,无视1~4吧)
A7:
1、更改本地链接的 DNS 地址 (最便捷,但是也最不推荐,该方法会明显影响网页访问速度)
2、修改 hosts  添加广告域名进行屏蔽 (效果较差,访问速度影响较小,不推荐)
3、路由器用户可通过IP防火墙拦截(效果较好,访问无影响,操作难度大,需要知道广告的IP段范围,但广告的IP也有可能是运营商的网站IP)
4、使用 本地安全策略 中 IP安全策略 进行屏蔽 (效果较好,访问无影响,操作难度巨大,需要知道广告的IP段范围,但广告的IP也有可能是运营商的网站IP)
5、打电话到网络服务运营商投诉(建议凶一点, 以质问的态度要求停止强制推送广告的行为),如果运营商不太愿意处理或者处理速度较慢,可以威胁他们说要打到工信部去投诉,如果还是无动于衷,那你真的打到工信部吧(不过要电话费)。
附:
网络服务运营商: 电信(10000), 联通(10010), 铁通(10050)
—— 小知识: 使用运营商相应的固话或移动电话拨打相应的服务电话是免费的
工信部电信业务投诉电话: 010-12300
工信部电信业务在线申诉网址: http://www.chinatcc.gov.cn:8080/cmsadmin/shouli/shensu.jsp
(建议提前收集好证据,例如广告页面以及地址的截图)


Q8、关于恶意插件引发弹窗广告
A8:例如本帖中的情况,当你对广告的出现产生怀疑时,不妨试试清理一下恶意插件。可以使用的软件有很多,建议不要太单一,多使用几个软件,多管齐下。


Q9、元素隐藏功能是否支持规则白名单? 能不能豁免全局过滤中的隐藏元素规则?
A9:据了解,目前元素隐藏功能不支持规则白名单,因此无法通过站点条目去豁免全局中的CSS规则。
PS:元素隐藏虽然无法支持规则的豁免,但是支持子站豁免,例如:想要某个CSS规则对某一个子站不生效
  1. sohu.com,~news.sohu.com##div#xxx
  2. (应用到sohu.com, 但排除子域news.sohu.com. 注意, 排除子站域不支持URL匹配)
复制代码
Q10、备份/恢复 用户自定义规则文件
A10:
备份用户自定义规则文件
文件位于 %appdata%\maxthon3\users\用户目录\ADFilter\AdFilter.dat (便携版文件在软件目录下的 Userdata 内.)
备份规则文件之前,请先关闭浏览器,否则无法备份规则文件。

恢复用户自定义规则文件
恢复规则文件之前需要先关闭同步服务,否则恢复的规则会立马被同步,从而造成恢复失败。
请按照以下步骤进行,不能乱否则无法恢复。如果步骤正常,但仍然无法恢复,请发帖求助开发姐姐。
恢复用户自定义规则:关闭过滤同步服务 --> 关闭浏览器 --> 用备份的规则覆盖过去 --> 打开浏览器 --> 开任意有规则的站 --> 简单编辑 --> 保存 --> 重启浏览器 --> 打开同步 --> 规则恢复完毕

Q11:广告过滤用户规则同步失败的原因?
A11:用户规则 的同步时机只有在账户登录后以及用户规则发生修改后进行。

如果发生了过滤规则同步失败,一般有如下原因。
1. 用户规则发生修改后,用户规则未同步完成。(详细见后面的补充)
2. 使用了无效的IP代理。
3. 网速过慢或者网络不稳定导致同步失败。
4. 在用户过滤规则成功同步之前对规则进行了修改(结果新的没下载到,旧的修改被上传了)。
5. 两台电脑的浏览器同时开着,且登录了同一账户,当其中一台进行规则修改时,会同步规则至服务器。此时,另一台电脑不会实时同步规则。如果另一台电脑也进行了规则修改,也会同步规则至服务器,服务器的规则将会被覆盖。

例1问题环境:在用户规则未同步完成时,出现了Maxthon.exe进程崩溃,或强制关闭所有Maxthon.exe进程,或在未关闭浏览器的情况下直接关机,都会造成无法完成同步。
另,在正常关闭浏览器的情况下,同步功能的进程仍然在运行,如果出现了上述的情况,也会造成同步失败。由于天朝小水管的网络环境,同步所有的用户数据可能需要10秒~1分钟的时间。
本帖由 admin [管理员] 发表于 2015-12-8 16:42:10 | 显示全部楼层
内容过滤教学

首先,先来一个传送门,在这里你可以学习到广告猎手的基本进阶的使用方法,所以此处不作过多的介绍了.
  1. 1. 一般匹配规则:
  2.     按字符匹配, 忽略大小写, 可使用通配符 * (任意数目的任意字符) 和 ? (1个任意字符).

  3.     范例:
  4.     无通配符: http://test.test.com/ads.js
  5.     有通配符: *.test.com/ads?/*

  6. 2. 正则匹配规则:
  7.      符合 PCRE 格式的正则表达式. 忽略大小写. 格式符合 js 的 inline regexp 格式:  /expression/

  8.      范例:
  9.      /ads|ad\/.*?\.swf/
  10.      /180x(90|87|48).*?(jpg|gif|png|swf)/

  11. 3. 白名单规则:
  12.      白名单规则通过在前述的一般规则前面添加 @@| 表示.忽略大小写, 可以使用 * 和 ?通配符.

  13.     范例:
  14.     @@|http://test.test.com/ads/logo.jpg
  15.     @@|http://test.test.com/add.*

  16. 4. 注释:
  17.      由 ! 号开头的行都视为注释文本, 不作为规则处理.

  18.      范例:
  19.      ! The following is an example of RegExp rule
  20.      !  /ads|ad\/.*?\.swf/
复制代码
正则表达式参考 (Regular Expression)傲游浏览器使用的正则表达式与 Perl 5 的正则表达式语法相同. 这里仅提供少量的信息作为快速参考.
基本语法
模式说明
.匹配除换行符(\n)之外的任何单个字符. 要匹配包括 '\n' 在内的任何字符, 可以使用 [.\n] 模式.
\转义字符, 用于转义紧跟的字符. 详情请参考转义字符表.
[...]定义一个字符类, 匹配方括号内的任意一个字符.
例: [abc] 可以匹配单个字符 a, b 或 c.
[^...]定义一个非匹配字符类的开始处, 它表示否定该字符类, 即匹配不在方括号中出现的任何字符.
例: [^abc] 可以匹配 e, 7, z 等除 a, b 和 c 之外的字符.
^如果 ^ 出现在正则表达式最前边, 它匹配输入字符串的开头.
例: ^[abc] 匹配输入字符串开头的 a, b 或 c , 如 about us, be it, can you?.
$放在正则表达式的最后, 匹配输入字符串的末端.
例: [0-9]$ 匹配输入字符串末端的一个数字字符, 如 last 9, add 1.
|"或"分隔符, 分隔多个表达式, 只须匹配其中一个.
例: th(is|at|ese|ose) 可以匹配 this, that, these 或 those.
-在字符类中, 指定一个字符范围.
例: [0-9] 匹配 0 到 9 的数字.
?匹配前面的子表达式零次或一次. ? 等价于 {0,1} .
例: do(es)? 可以匹配 do 或 does.
+匹配前面的子表达式一次或多次. + 等价于 {1,} .
例: zo+ 能匹配 zo 以及 zoo 或者 zoooo, 但不能匹配 z .
*匹配前面的子表达式零次或多次. * 等价于 {0,} .
例: zo* 能匹配 z 以及 zoo .
{n}匹配前面的子表达式确定的 n 次. n 是一个非负整数.
例: o{2} 不能匹配 Bob 中的 o , 但是能匹配 food 中的 oo .
{n,}匹配前面的子表达式至少 n 次. n 是一个非负整数. e{1,} 等价于 e+ , e{0,} 则等价于 e* .
例: e{2,} 不能匹配 Bed 中的 e , 但是能匹配 feel 和 feeeeel 中所有的 e .
{n,m}匹配前面的子表达式最少 n 次且最多 m 次. n<=m, m 和 n 均为非负整数. 在逗号和两个数字之间不能有空格. o{0,1} 等价于 o? .
例: o{1,3} 可以匹配 fooooood 中的前三个 o .
??
+?
*?
{n}?
{n,}?
{n,m}?
?, +, *, {n}, {n,}, {n,m} 的非贪婪匹配版本, 非贪婪匹配在匹配时会尽可能匹配较少的字符.
例: 输入字符串为 <abc><def>
使用非贪婪匹配 <.*?> 会匹配 <abc> .
使用贪婪匹配 <.*> 会匹配整个 <abc><def> .
(pattern)表达式分组操作符. 用于分隔子表达式和返回部分匹配结果. 返回的结果可以在替换操作的时候用 $1 - $10 表示.
例: (\d+,)*\d+ 可以匹配逗号分隔的数字字符串, 如 41 或 1,23,456 .




转义字符表
范例说明
\w表示任意字母和数字, 等价于 [a-zA-Z0-9]
\W表示任意非字母和数字字符, 等价于[^a-zA-Z0-9]
\s表示任何空白字符, 包括空格, 制表符, 换页符等等, 等价于 [ \f\n\r\t\v]
\S表示任何非空白字符, 等价于 [^ \f\n\r\t\v]
\d表示任意数字, 等价于 [0-9]
\D表示任意非数字字符, 等价于 [^0-9]
\b表示单词边界, 即字母和空格之间的位置. 也可能表示退格键.
\B表示非单词边界
\1 - \10表示前面用 () 包含的第 n 个子表达式.
例: <t(.*?)>caption<\/\1> 可以匹配 <title>caption</title>, 注意里面的 \1 .
特别提醒: 如果机器性能比较一般, 甚至较差, 建议减少使用正则过滤规则, 大量使用正则过滤规则会增加CPU的消耗, 有可能会对访问速度有所影响.
本帖由 admin [管理员] 发表于 2015-12-8 16:43:43 | 显示全部楼层
CSS隐藏基础教学  &  CSS隐藏FAQ

  • 自定义CSS规则的基本格式
  • 关于基本选择器 . 与 # 的使用详解(即: Class 与 ID)
    (PS: 选择器中, 空格使用的注意事项)
  • 关于属性选择器的使用详解 & 空格的注意事项
  • 关于一个Class存在多个值,属性选择器与基本选择器的使用问题
  • 基本选择器与属性选择器以及结构性伪类连续多个一起使用
  • 关于结构性伪类 (B)(An)(An+B)与(-n+B)(-An+B) 的使用方法
  • 如何通过子元素定位父元素,从而过滤父元素?
  • CSS隐藏支持通配符或者正则表达式吗?

Q1:自定义CSS规则的基本格式
A1
1. 域名匹配的元素隐藏规则的描述: <domains>##<css selector>
注:
<domains>为多个域名,以逗号分隔。域名前可带~,表示例外,表示这个规则不应用在此域名上(它不会单独使用)。
<domains>为空时, 应用到整个站点。
<css selector>为css选择子。
  1. ##sohuadcode
  2. ##div#myid
  3. ##div.myclass
  4. ###myid
  5. (上面几个规则应用到整个站点)
  6. it.sohu.com##div#yyy
  7. (应用到it.sohu.com)
  8. sohu.com,~news.sohu.com##div#xxx
  9. (应用到sohu.com,但排除子域news.sohu.com)
复制代码
2. URL匹配的元素隐藏规则描述: <url>@##<css selector>

注:<url>为正则表达式或通配形式书写的URL。
如:
  1. http://www.sohu.com/*@##sohuadcode
  2. /www\.sohu\.com/@##sohuadcode
复制代码

======================= 分割线=======================

Q2 关于基本选择器 . 与 # 的使用详解(即 Class 与 ID)
A2: 首先,在CSS中,除了标签选择器,ID选择器Class选择器都是对大小写敏感的。
基本选择器仅支持 大小写字母下划线数字 ,并且选择器的参数内容不能为纯数字或数字开头. (例:.1、#1、.1a)
另外,网页中的 ID 是具有唯一性的,常况下同一个 ID 名在一个页面只能存在一个。当然,网页上一些特殊需求可能会出现多个同名ID,这里不详解。

PS空格的注意事项
在网页中经常会遇到 Class 的值中包含了空格, 如
  1. <div id="a b" class="wp a_h">
复制代码
当出现空格时, 实际上代表着这个 Class 有两个值, 即 .wp 与 .a_h
注意: 网页中ID属性的值包含空格的情况也是允许的, 但是即使包含空格, 也还是只一个ID, 但ID的值包含空格会引发很多蛋疼的问题. (所以的网页不会干这种事)

当 Class 的值有空格时, 基本选择器还是可以使用的。上面提到, 因为 Class 是有两个值, 所以在规则中, 可以单独取出一个值来隐藏目标.
当然, 如果有存在两个Class的DIV, 那很可能在别的地方也正用着其中一个Class, 这样很容易引起误过滤. 因此需要学习 Q3 Q4 Q5 的方法.

另外, 顺带提一下关于CSS规则中使用空格的问题
例如, 在CSS过滤规则的标签与(属性)选择器之间不能存在空格, 否则两者之间会将其当作后代组合选择器.
如规则:
  1. ##  div [class="wp a_h"]
复制代码
由于 DIV 与 [class="wp a_h"] 之间存在空格,因此被过滤的不是下面的蓝色代码,而是其子元素(红色代码)。
  1. <blockquote><font color="#0000ff"><div id="a b" class="wp a_h"></font>
复制代码

======================= 分割线=======================

Q3 关于属性选择器的使用详解
A3: 在上面的详解中,提到过基本选择器的敏感性。而 属性选择器属性名的大小写敏感性取决于文档语言的敏感性,也就是说它不仅对大小写敏感,如果属性值包含有简繁中文,或者别的字符,都是存在敏感性的。
另外,一个属性选择器只能包含一个属性,但是可以包含多个值。
即:
[width="100" height="100"] 这样的属性选择器是无效的;
[style="width:100px;height:100px"] 这样是可以的, 但是要注意敏感性以及空格问题.
因此, 个人更推荐 [style="width:100px;"][style="height:100px"] 这样的写法, 不要在乎代码长度, 重要的是方便和效果.
另外, 选择器是可以连续使用的, 详细参见后面的内容.

属性选择器的使用方式一共有7种,详细可以阅览上面的进阶教程。

======================= 分割线=======================  

Q4 关于一个 Class 存在多个值,属性选择器与基本选择器的使用问题
A4: 在网页中经常能看到一个 Class 的值里包含了空格,实际上这里是代表 Class 中存在多个值。
在这个时候,如果想要过滤一个存在两个值的 Class 就需要特别注意了。

例如:class="main warp" 与 class="warp" ,假设 warp 是定义一个边框的效果
如果 warp 这个同时应用在网页的主体区域与广告区域
使用属性选择器 [class="warp"] 与 .warp 是有区别的,前者是精确匹配的,而后者能够同时匹配两个 Class ,因为前者是包含了两个值。
而使用属性选择器的其它特色选择方式时,亦需要注意上述问题。
另外,遇到两个值的 Class ,选择器是可以连续使用的,以提高过滤精确度。
详细参见:基本选择器与属性选择器以及结构性伪类连续多个一起使用

======================= 分割线=======================
Q5 基本选择器与属性选择器以及结构性伪类连续多个一起使用
A5: 在同一行中,不使用分隔符的情况下,基本选择器属性选择器以及结构性伪类是可以连续多个一起使用的,以提高规则严谨性和控制过滤范围。

例1:基本选择器连续使用
代码:
  1. <div class="ad mod">
复制代码
示例目标:关于一个Class存在多个值的时候,该如何隐藏
示例说明:在这个Class中,ad定义了广告显示的样式,而mod定义了广告外边框效果。如果仅过滤 ad 则会留框,因此需要同时过滤。

简单选择器过滤:##.ad.mod
注意事项:两个类名可以不分先后次序,但此时的简单选择器前无法带标签名
属性选择器过滤:##div[class="ad mod"] 与 ##div[class*="ad"][class*="mod"]
注意事项:前者是属于固定的一种属性值才有效,而后者与简单选择器一样可以不分先后次序。

例2:属性选择器连续使用
代码:

  1. <form>
  2. <input value="1">
  3. <Table id="forum_60"><tr><td>Magnet: 1</td></tr></table>
  4. <Table id="forum_60"><tr><td>Magnet: </td></tr></table>
  5. <Table id="forum_60"><tr><td>Magnet: </td></tr></table>
  6. <Table id="forum_60"><tr><td>Magnet: </td></tr></table>
  7. <Table id="forum_60"><tr><td>Magnet: 5</td></tr></table>
  8. </form>
复制代码
示例目标:保留前面的Input与最后的Table, 过滤中间的4个Table
示例说明:此类需求偶尔会有,其实可以达到目的的方法还有很多,这里主要讲解结构性伪类的连续使用
结构性伪类过滤: ##form>:not(:nth-child(1)):not(:nth-last-child(1))
注意事项: 这里前后两个 :not 也是可以调换的

例3: 基本选择器与属性选择器同时使用
<table>
<tr>
<td class="ad"></td>
<td width="320" class="ad"></td>
<td width="320"></td>
</tr>
</table>
示例目标:隐藏第二个TD
示例说明:这个Class同时被两个TD使用,而Width也同时被两个TD使用,而却只有中间的TD是广告。
基本选择器+属性选择器过滤:td.ad[width="320"]
当然,这里也能够使用 :nth-child 或者 :nth-of-type 来解决。


======================= 分割线=======================


Q6关于结构性伪类 (B)(An)(An+B)与(-n+B)(-An+B) 的使用方法
A6:以下均以 :nth-child 为实例,A与B 均为常数;n为非负整数(1,2,3,4....),而后 n 进行递增1;(An+B) 与 (-An+B) 的值>0时有效,若≤0时无效。
PS: 结构性伪类只能支持HTML标签, 即冒号前使用class或者ID都是无效的. 下面直接使用简单的 数学式 来表达,不过多使用文字表达了。


(B): B=2,即选择第2个TR。


(An):
A=2,即选择第2个TR;
此时 n=1,n递增1之后为2(n=n+1=2),此时2*2=4,所以选择了第4个TR;
此时 n=2,n递增1之后为3(n=n+1=3),此时2*3=6,所以选择了第6个TR;
以此类推:2、4、6、8、10……


(An+B):
首先 B=1,因此选择了第1个TR;
此后参照 An 进行递增,2*1+1=3,所以选择了第3个TR;
继续参照 An 进行递增,2*2+1=5,所以选择了第5个TR;
以此类推:1、3、5、7、9……


(-n+B) 与 (-An+B) :
首先 B=2,因此选择了第2个TR;
此后参照 -An 进行递减,-2*1+6=4,所以选择了第4个TR;
继续参照 -An 进行递减,-2*2+6=2,所以选择了第2个TR;
以此类推,直到 -An+B≤0时无效。
PS:-n 实际等于 -1*1,所以始终 -1。

======================= 分割线=======================


Q7如何通过子元素定位父元素,从而过滤父元素?
A7:很多人都很喜欢问这个问题,可惜的是这一次不是教学。
单纯从CSS规则里说,这个是不可能的,CSS规则并不支持这样的使用。
但是如果结合JS的话,那是可能的。例如某个 TR 下的TD存在ID或者其它可用于定位TD的属性,然后再找到这个TD的上一个父节点,再对这个父节点插入 Style="display:none" 属性,那还是有可能达到这一个目的的。
嘛~可是这个方法相当麻烦,而且实现的条件也比较苛刻,还不如老实的使用 :nth-child 吧。


======================= 分割线=======================


Q8CSS隐藏支持通配符或者正则表达式吗?
A8:这同样是许多新手喜欢问的问题, 很遗憾地说, 不能. 但是遇到有规律的代码时, 我们还是有办法可以减少我们规则的代码量.
方法就是采用 "属性选择器", 详细请参见进阶教程中的属性选择器教学.
例如常见的论坛广告, 如 [class="wp a_t"], [class="a_pr"], [class="a_p"], 这三种. 我们可以使用属性选择器[class*="a_"] 来匹配 Class 中包含 "a_" 的元素.
但是使用 *= 这种通配方式很容易产生误过滤, 例如这种情况 [class="ct2_a ct2_a_r wp cl"], 其中 "ct2_a_r" 就包含了 "a_" .
因此, 在产生误过滤时, 注意使用更严谨的方式. 例如 "a_" 只出现于头和尾, 可以分别使用 [class^="a_"] 与 [class$="_pr"] .
本帖由 admin [管理员] 发表于 2015-12-8 16:45:24 | 显示全部楼层
CSS来源有哪些?
CSS应用优先权是什么?
!Important的作用是什么?

!Important 的作用

首先来解答 !Important 的作用,!Important 是用于提高指定样式属性的应用优先权。

首先来看图,超链接字体颜色 color 属性为灰黑色#444,通过广告猎手功能,自定义了一个超链接字体颜色为红色的样式。此时页面的超链接字体颜色为红色。这个代码中就利用到 !Important ,如果不使用 !Important ,则用户自定义的样式将不会起作用。
为何不会起作用?!接下来就要说到CSS来源。





CSS 的来源

CSS的来源有三种,浏览器内建样式(user agent stylesheet)、页面样式(author style sheets)、用户自定义样式(user style sheets)。
浏览器内建样式:按F12打开审查工具即可看到,如图
页面样式:页面中定义的样式,包括:外部样式(External Style)、内部样式(Internal style)、内嵌样式(Inline style)。
用户自定义样式:广告猎手可以简单理解为用户自定义样式的一种应用,通过广告猎手自定义样式即为用户自定义样式。

CSS来源的优先级由上至下依次为:
1. 浏览器内建样式
2. 用户自定义样式
3. 页面样式
4. 页面样式(有 !Important)
5. 用户自定义样式(有 !Important)

通过上面的优先级可以了解到,广告猎手的用户自定义样式如果不带 !Important 其等级将处于2级的位置,而使用了 !Important 将为最高。





CSS样式应用的优先权

由于应用的优先权算法和原则较为复杂和专业,此处仅作简单举例说明,有关于优先权算法请自行度娘或者谷狗。
页面样式已知有三种来源,外部样式、内部样式、内嵌样式。

外部样式:通过 link 标签或者 @import 引入外部样式表文件。
  1. <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css">
复制代码
  1. <style>@import ("test.css")</style>
复制代码
两者的最大区别为 link 标签在页面加载时同时加载CSS样式文件,而 @import 为页面完全载入后再载入CSS样式文件。

内部样式:通过 Style 标签建立的CSS。

内嵌样式:标签中的 Style 属性。

优先级为:内嵌样式 > 内部样式 > 外部样式,当 class 已定义样式,而标签中包含相同属性的样式,则内嵌样式优先级最高。
有个例外情况, 如果外部样式表是放在内部样式表后面, 因为加载顺序问题, 有可能覆盖内部样式表。

按照样式的加载顺序,内部或外部样式中,对于同一个样式属性进行了多次定义,则会采用最后一次定义的样式属性。
例如:
  1. a {color:blue; color:red;}
复制代码
在该样式中对超链接字体颜色定义了两次,第一次为蓝色,第二次为红色,则超链接的字体颜色为红色。

样式优先权简单示例:!important > HTML标签#ID > HTML标签.Class > #ID > .Class 或 属性选择器 或 伪类> HTML元素 或 伪元素
!Important 的优先权就不再解释了。
有HTML标签的简单选择器的优先权=HTML元素 + 简单选择器,因此优先权高于无标签简单选择器,然后再高于HTML元素。

另外,优先权可通过选择符得到逐位叠加,因此叠加了11层的Class是有可能超过#ID的优先权.
最后,子元素可继承父元素的部分样式,但是优先权为0。

以下附上一个关于上述优先权效果的简单演示附件.



REISEREISE [初入江湖] 发表于 2016-1-11 10:31:58 | 显示全部楼层
## div.card_head{margin: 0px !important;bottom: 0px !important;}
这种的 为啥都不好使呢
本帖由 极品ΦωΦ小 [超级版主] 发表于 2016-3-18 16:03:58 | 显示全部楼层
REISEREISE 发表于 2016-1-11 10:31
## div.card_head{margin: 0px !important;bottom: 0px !important;}
这种的 为啥都不好使呢

4.4.6 以上的版本不支持 CSS 修改了,需要安装 Stylish 插件
coxie99 [初入江湖] 发表于 2016-4-14 22:29:02 | 显示全部楼层
广告过滤
您需要登录后才可以回帖 登录 | 加入傲游社区
快速回复 返回顶部 返回列表