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

[规则分享] 如何更好的隐藏广告——元素隐藏:CSS选择器简介

[复制链接]
本帖由 admin [管理员] 发表于 2015-12-8 17:08:41 | 显示全部楼层 |阅读模式  4012 1
M3的广告过滤可以使用CSS选择器过滤页面元素

置顶帖介绍的比较简单 这里补充一些
原文:W3C css3-selectors水平有限,如有错漏,请指出
示例会慢慢补完,如能提供好的示例,请跟帖指出

0、M3元素过滤格式
CSS选择器过滤页面元素的格式如下
  1. ## a
复制代码
其中->##<-(不包括“->”和“<-”。以下相同)为元素过滤的开始标示, 后面跟随的是具体的选择器
其中->a<- 为标签选择器,匹配所有使用a标签的元素
即 ## a 的含义为过滤页面中所有使用a标签的元素
其中的 a 可以替换为以下各种选择器,实现不同效果

/*****************************************************************/

1、基本选择器
最基本的元素选择器,一共4个

*
a
.a
#a

.                                                                                                                     .   
.                                                                                                                     .
.                                                                                                                     .

选择器:  *
含义: 通用元素选择器,匹配任意元素,即可以选中全部元素
示例:
  1. ## *
  2. !选择全部元素
  3. !效果:  屏蔽页面上所有元素
复制代码
.                                                                                                                     .
选择器:  a
含义: 标签选择器,匹配所有标签为a的元素
(常用标签:  html、title、head、body、div、table、tr、td、li、form、img、script、a、p、br、h1、h2、h3、h4、h5、h6...)
示例:
  1. ## ul
  2. !说明:选择标签为->ul<-的全部元素
  3. !效果:  鼠标放到各种按钮上不显示菜单
复制代码
.                                                                                                                     .
选择器:  .a
含义: 类(class)选择器,匹配所有class名为a元素
示例:
  1. ## .maxthon-header-wrapper
  2. !选择类名为->maxthon-header-wrapper<-的全部元素
  3. !效果:  屏蔽页面页面标题栏上黑色那条
复制代码
.                                                                                                                     .
选择器:  #A
含义: id选择器,匹配所有id为A的元素
示例:
  1. ## #header
  2. !选择id名为->header<-的全部元素
  3. !效果:  屏蔽论坛页面标题栏
复制代码
.                                                                                                                     .
/*****************************************************************/


.                                                                                                                     .
2、组合选择器
组合选择器通过多个元素之间的关系来指定元素
组合选择器有5个
a,b
a b
a>b
a+b
a~b



以下将 #postlist             记作p  ,即所有帖子列表,所有帖子的父元素
     将 #post_3340285 记做a1,即楼主贴,其他楼层以此类推


.                                                                                                                     .
选择器:  e ,f
含义: 多元素选择器,同时匹配所有的e元素和所有的f元素,多个元素之间用半角逗号分隔
示例:

  1. ## a2,a5,a8
  2. ! 说明:选中a2,a5,a8
  3. ! 效果:2#、5#、8#、被屏蔽
复制代码
.                                                                                                                     .
选择器: e f
含义: 后代元素选择器,匹配e的所有后代中的全部f元素,e和f之间用空格隔开
示例:

  1. ## p a
  2. ! 说明:选中p的所有后代中的全部a
  3. ! 效果:1#至20#被屏蔽
复制代码
.                                                                                                                     .
选择器:  e > f
含义: 子元素选择器,匹配e的所有子元素中的全部f元素
  1. ## p a
  2. ! 说明:选中p的所有后代中的全部a
  3. ! 效果:1#至20#被屏蔽
复制代码
.                                                                                                                     .
.                                                                                                                     .
以下将 #postlist > div   记作a,即所有的帖子,帖子列表的所有子元素
.                                                                                                                     .
.                                                                                                                     .
选择器:  e + f
含义: 直接兄弟元素选择器,匹配紧跟所有e元素的与e同级的f元素(f元素最多只能为1个)
示例:

  1. ## a5+a
  2. ! 说明:匹配紧跟a5元素的与a5同级的a元素
  3. ! 效果:6#被屏蔽
复制代码
.                                                                                                                     .
选择器:  e ~ f
含义: 通用兄弟元素选择器,匹配所有e元素之后的同级的f元素(f元素数量可以大于1个)
示例:

  1. ## a5~a
  2. ! 说明:匹配所有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. ## a[id]
  2. !说明:选择所有标签为div的a元素,这些元素具有属性id
  3. !效果: 1#至20楼被屏蔽
复制代码
.                                                                                                                     .
选择器:  [attr=val]
含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值等于->val<-
示例:

  1. ## a[id="post_3419917"]
  2. !说明:选择所有标签为div的a元素,这些元素具有属性id,id的值为post_3419917!(字符串"post_3419917"两端的引号->"<-可不写,但是字符串以数字开头时必须写,以下相同)
  3. !效果: 12#被屏蔽
复制代码
.                                                                                                                     .
选择器:  [attr~=val]
含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值为具有多个空格分隔的值,并且其中的一个值等于->val<-
示例:

  1. ##  div[class~=mainbox]
  2. !说明:选择所有标签为div的元素,这些元素具class属性,class的值为具有多个空格分隔的值,并且其中一个值等于mainbox
  3. !效果: 1#至20#被屏蔽
复制代码
.                                                                                                                     .
选择器:  [attr^=val]
含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值以->val<-开头
示例:

  1. ##  div[id^=post_334]
  2. !说明:选择所有标签为div的元素,这些元素具id属性,id的值为以->post_334<-开头
  3. !效果: 1#、2#、3#、4#被屏蔽
复制代码
.                                                                                                                     .
选择器: [attr$=val]
含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值以->val<-结尾
示例:

  1. ##  div[id$="94966"]
  2. !说明:选择所有标签为div的元素,这些元素具id属性,id的值为以->94966<-结尾
  3. !效果: 6#被屏蔽
复制代码
.                                                                                                                     .
选择器:  [attr*=val]
含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值字符串中包含->val<-字符串
示例:

  1. ##  div[id*=4177]
  2. !说明:选择所有标签为div的元素,这些元素具id属性,其中id的属性值字符串中包含->4177<-字符串
  3. !效果: 8、9、10#被屏蔽
复制代码
.                                                                                                                     .
选择器:  [attr|=val]
含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值为具有多个连字号->-<-分隔的值、并且其中的一个值以->val<-开头
说明:改选择器一般用于匹配语言元素, 例如[lang|=zh] 能选中 <a lang=zh-cn></a>、<b lang=zh-hk></b>、<c lang=zh-tw></b>
/*****************************************************************/


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. ## :root
  3. !效果:所有元素被屏蔽
复制代码
.                                                                                                                     .
伪类:  :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-child<-之间不能有空格,以下相同)
.                                                                                                                     .
伪类:  :nth-last-child(An+B)
含义: 结构性伪类,和匹配父元素的倒数第An+B个子元素
(用法和:nth-last-child(An+B)相似,但是顺序是倒转的,从最后一个子元素开始记为倒数第1个子元素)
示例:
  1. ## a:nth-last-child(3n+4)
  2. ! 说明:匹配a的父元素p的倒数第3n+4个子元素a(3n+4)
  3. ! 效果:1、4、7、10、13、17#被屏蔽
复制代码
.                                                                                                                     .
伪类:  :nth-type(An+B)
含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的第An+B个子元素
示例:
  1. ## a:nth-child(3n+4)
  2. ! 说明:匹配a的父元素p的第3n+4个子元素a(3n+4)
  3. ! 效果:4、7、10、13、16、19#被屏蔽
复制代码
.                                                                                                                     .
伪类:  :nth-of-type(An+B)
含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的第An+B个子元素
用法与伪类:  :nth-child(An+B)类似。
区别:
伪类:  :nth-child(An+B)计算父元素中所有标签类型的子元素
伪类:  :nth-type(An+B)计算父元素中与自身标签类型相同的子元素
示例:
测试页面: 苦力王篮球

要求过滤标题广告(第一个div#main),分别用这两种伪类来选择

  1. ## #divAll>div:nth-child(4)
  2. !过滤divAll的第4个子元素
  3. !效果:标题广告(第一个div#main)被过滤

  4. ## #divAll>div:nth-of-type(2)
  5. !说明:过滤divAll的第2个div子元素
  6. !效果:标题广告(第一个div#main)被过滤     
复制代码
.                                                                                                                     .
伪类:  :nth-last-of-type(An+B)
含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的倒数第An+B个子元素
用法与伪类:  :nth-last-child(An+B)类似。
区别同上


.                                                                                                                     .
伪类:  :first-child
含义: 结构性伪类,匹配父元素的第一个子元素,等价于a:nth-child(1)
示例:

  1. ## a:first-child
  2. ! 说明:选中a的父元素p的第一个子元素a1
  3. ! 效果:楼主被屏蔽
复制代码
示例2:
.                                                                                                                     .
伪类:  :last-child
含义: 结构性伪类,匹配父元素的最后一个子元素,等价于a:nth-last-child(1)
示例:

  1. ## a:last-child
  2. ! 说明:匹配a的父元素p的最后一个子元素a20
  3. ! 效果: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-child
  2. !或
  3. :nth-child(1):nth-last-child(1)
复制代码
示例:待补完


.                                                                                                                     .
伪类:  :only-of-type
含义: 结构性伪类,匹配元素的父元素中使用和元素同种标签的唯一子元素,即元素的父元素有且只有一个使用同种标签子元素时,选中这个子元素
等价于
  1. :first-of-type:last-of-type
  2. !或
  3. :nth-of-type(1):nth-last-of-type(1)
复制代码
用法与伪类:  :only-child类似。
区别同上

.                                                                                                                     .
伪类:  :empty
含义: 结构性伪类,匹配任意元素,这个元素不包含任何子元素,包括文档节点,即标签中什么都没有,包括空格
示例:
  1. <div id="sideBar">
  2.         <h1><span></span></h1>
  3.         <h2 ></h2>
  4.         <h3>text</h3>
  5.         <h4></h4>
  6. </div>
复制代码

  1. ## div >*:empty
  2. !说明:选择空元素
  3. !效果:选中<h4></h4>
复制代码
/*****************************************************************/
5、否定伪类
否定伪类通过"非"关系来选择元素
结构性伪类只有1个
:not(a)

.                                                                                                                     .
选择器:  :not(a)
含义: 否定伪类,匹配所有不是a元素的元素,这里的a必须是一个简单选择器(包括通用元素选择器、标签选择器、类选择器、id选择器、属性选择器和伪类),否定伪类自身不能作为a,即:not(:not())是不合法的
      
代码简化同上


示例:
  1. ## a:not(a1)
  2. !说明:匹配a元素中所有不是a1元素的元素(1#以外)
  3. !效果:楼主之外被过滤
复制代码
/*****************************************************************/
6、其他伪类   
.                                                                                                                     .  
待补完,原文

/*****************************************************************/
7、伪元素
.                                                                                                                     .
待补完,原文
评论
精彩评论 ( 1条 ) 跳转到指定楼层
本帖由 admin [管理员] 发表于 2015-12-8 17:09:08 | 显示全部楼层
关于结构性伪类、否定伪类的更多示例

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. ## :root
  3. !效果:所有元素被屏蔽
复制代码
.                                                                                                                     .
伪类:  :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,B≠0时,:nth-child(0n+B)写作:nth-child(B)

  1. ## a:nth-child(3)
  2. ! 说明:匹配a的父元素p的第3个子元素a3
  3. ! 效果:3#被屏蔽
复制代码
(->a<-和->:root<-之间不能有空格,以下相同)
当A≠0,B=0时,:nth-child(An+0)写作:nth-child(An)
  1. ## a:nth-child(3n)
  2. ! 说明:匹配a的父元素p的第3n个子元素a(3n)
  3. ! 效果:3、6、9、12、15、18#被屏蔽
复制代码
  1. ## a:nth-child(2n)
  2. ! 说明:匹配a的父元素p的第2n个子元素a(2n)
  3. ! 效果:偶数#被屏蔽
复制代码
当A>0,B>0时, :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. ! 效果:奇数#被屏蔽
复制代码
当A>0,B<0时, :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. ! 效果:奇数#被屏蔽
复制代码
当A<0,B>0时, :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#被屏蔽
复制代码
关于A<0的更多示例请看过滤讨论区 - Maxthon3 » 分享屏蔽前后两个元素的方法
  1. ## a:nth-child(-2n+1)
  2. ! 说明:匹配a的父元素p的第-2n+1个子元素a(-2n+3)
  3. ! 效果:1#、3#被屏蔽
复制代码
此外还有
  1. ## a:nth-child(odd)
  2. ! 说明:匹配a的父元素p的第奇数个个子元素a(2n+1)
  3. ! 效果:奇数#被屏蔽
复制代码
  1. ## a:nth-child(even)
  2. ! 说明:匹配a的父元素p的第偶数个子元素a(2n)
  3. ! 效果:偶数#被屏蔽
复制代码
.                                                                                                                     .
伪类:  :nth-last-child(An+B)
含义: 结构性伪类,和匹配父元素的倒数第An+B个子元素
(用法和:nth-last-child(An+B)相似,但是顺序是倒转的,从最后一个子元素开始记为倒数第1个子元素)
示例:
当A=0,B≠0时,:nth-last-child(0n+B)写作:nth-last-child(B)

  1. ## a:nth-last-child(3)
  2. ! 说明:匹配a的父元素p的倒数第3个子元素a18
  3. ! 效果:3#被屏蔽
复制代码
当A≠0,B=0时,:nth-last-child(An+0)写作:nth-last-child(An)
  1. ## a:nth-last-child(3n)
  2. ! 说明:匹配a的父元素p的倒数第3n个子元素a(3n)
  3. ! 效果:1、4、7、10、13、18#被屏蔽
复制代码
  1. ## a:nth-last-child(2n)
  2. ! 说明:匹配a的父元素p的倒数第2n个子元素a(2n)
  3. ! 效果:偶数#被屏蔽
复制代码
当A>0,B>0时, :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. ! 效果:奇数#被屏蔽
复制代码
当A>0,B<0时, :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. ! 效果:奇数#被屏蔽
复制代码
当A<0,B>0时, :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. ## #divAll>div:nth-child(4)
  2. !过滤divAll的第4个子元素
  3. !效果:标题广告(第一个div#main)被过滤

  4. ## #divAll>div:nth-of-type(2)
  5. !说明:过滤divAll的第2个div子元素
  6. !效果:标题广告(第一个div#main)被过滤     
复制代码
.                                                                                                                     .
伪类:  :nth-last-of-type(An+B)
含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的倒数第An+B个子元素
用法与伪类:  :nth-last-child(An+B)类似。
区别同上


.                                                                                                                     .
伪类:  :first-child
含义: 结构性伪类,匹配父元素的第一个子元素,等价于a:nth-child(1)
示例:

  1. ## a:first-child
  2. ! 说明:选中a的父元素p的第一个子元素a1
  3. ! 效果:楼主被屏蔽
复制代码
.                                                                                                                     .
伪类:  :last-child
含义: 结构性伪类,匹配父元素的最后一个子元素,等价于a:nth-last-child(1)
示例:

  1. ## a:last-child
  2. ! 说明:匹配a的父元素p的最后一个子元素a20
  3. ! 效果: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-child
  2. !或
  3. :nth-child(1):nth-last-child(1)
复制代码
示例:待补完


.                                                                                                                     .
伪类:  :only-of-type
含义: 结构性伪类,匹配元素的父元素中使用和元素同种标签的唯一子元素,即元素的父元素有且只有一个使用同种标签子元素时,选中这个子元素
等价于
  1. :first-of-type:last-of-type
  2. !或
  3. :nth-of-type(1):nth-last-of-type(1)
复制代码
用法与伪类:  :only-child类似。
区别同上

.                                                                                                                     .
伪类:  :empty
含义: 结构性伪类,匹配任意元素,这个元素不包含任何子元素,包括文档节点,即标签中什么都没有,包括空格
示例:
  1. <div id="sideBar">
  2.         <h1><span></span></h1>
  3.         <h2 ></h2>
  4.         <h3>text</h3>
  5.         <h4></h4>
  6. </div>
复制代码

  1. ## div >*:empty
  2. !说明:选择空元素
  3. !效果:选中<h4></h4>
复制代码
您需要登录后才可以回帖 登录 | 加入傲游社区
快速回复 返回顶部 返回列表