M3的广告过滤可以使用CSS选择器过滤页面元素 置顶帖介绍的比较简单 这里补充一些 原文:W3C css3-selectors水平有限,如有错漏,请指出 示例会慢慢补完,如能提供好的示例,请跟帖指出 0、M3元素过滤格式 CSS选择器过滤页面元素的格式如下
其中->a<- 为标签选择器,匹配所有使用a标签的元素 即 ## a 的含义为过滤页面中所有使用a标签的元素 其中的 a 可以替换为以下各种选择器,实现不同效果 /*****************************************************************/ 1、基本选择器 最基本的元素选择器,一共4个 * a .a #a . . . . . . 选择器: * 含义: 通用元素选择器,匹配任意元素,即可以选中全部元素 示例:
选择器: a 含义: 标签选择器,匹配所有标签为a的元素 (常用标签: html、title、head、body、div、table、tr、td、li、form、img、script、a、p、br、h1、h2、h3、h4、h5、h6...) 示例:
选择器: .a 含义: 类(class)选择器,匹配所有class名为a元素 示例:
选择器: #A 含义: id选择器,匹配所有id为A的元素 示例:
/*****************************************************************/ . . 2、组合选择器 组合选择器通过多个元素之间的关系来指定元素 组合选择器有5个 a,b a b a>b a+b a~b 以下将 #postlist 记作p ,即所有帖子列表,所有帖子的父元素 将 #post_3340285 记做a1,即楼主贴,其他楼层以此类推 . . 选择器: e ,f 含义: 多元素选择器,同时匹配所有的e元素和所有的f元素,多个元素之间用半角逗号分隔 示例:
选择器: e f 含义: 后代元素选择器,匹配e的所有后代中的全部f元素,e和f之间用空格隔开 示例:
选择器: e > f 含义: 子元素选择器,匹配e的所有子元素中的全部f元素
. . 以下将 #postlist > div 记作a,即所有的帖子,帖子列表的所有子元素 . . . . 选择器: e + f 含义: 直接兄弟元素选择器,匹配紧跟所有e元素的与e同级的f元素(f元素最多只能为1个) 示例:
选择器: e ~ f 含义: 通用兄弟元素选择器,匹配所有e元素之后的同级的f元素(f元素数量可以大于1个) 示例:
对父元素、子元素不清楚的可以看这里CSS继承详解 /*****************************************************************/ 3、属性选择器 属性选择器通过元素属性来选择元素 属性选择器有7个, [attr] 、 [attr=value] 、 [attr~=value] 、 [attr^=value] 、 [attr$=value] 、 [attr*=value] 、 [attr|=value] 代码简化同上 . . 选择器: [attr] 含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值为任意值。 示例:
选择器: [attr=val] 含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值等于->val<- 示例:
选择器: [attr~=val] 含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值为具有多个空格分隔的值,并且其中的一个值等于->val<- 示例:
选择器: [attr^=val] 含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值以->val<-开头 示例:
选择器: [attr$=val] 含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值以->val<-结尾 示例:
选择器: [attr*=val] 含义: 属性选择器,匹配所有包含attr属性的元素,其中attr属性值字符串中包含->val<-字符串 示例:
选择器: [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元素, 相当于 *(这个选择器在广告过滤中用处不大) 示例:
伪类: :nth-child(An+B) 含义: 结构性伪类,匹配a元素的父元素的第An+B个子元素 (A、B为常数,n为非负整数,0、1、2、3... min(An+B)>0 ,以下相同)( 关于An+B的更多示例,详见2L,以下相同) 示例:
. . 伪类: :nth-last-child(An+B) 含义: 结构性伪类,和匹配父元素的倒数第An+B个子元素 (用法和:nth-last-child(An+B)相似,但是顺序是倒转的,从最后一个子元素开始记为倒数第1个子元素) 示例:
伪类: :nth-type(An+B) 含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的第An+B个子元素 示例:
伪类: :nth-of-type(An+B) 含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的第An+B个子元素 用法与伪类: :nth-child(An+B)类似。 区别: 伪类: :nth-child(An+B)计算父元素中所有标签类型的子元素 伪类: :nth-type(An+B)计算父元素中与自身标签类型相同的子元素 示例: 测试页面: 苦力王篮球 要求过滤标题广告(第一个div#main),分别用这两种伪类来选择
伪类: :nth-last-of-type(An+B) 含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的倒数第An+B个子元素 用法与伪类: :nth-last-child(An+B)类似。 区别同上 . . 伪类: :first-child 含义: 结构性伪类,匹配父元素的第一个子元素,等价于a:nth-child(1) 示例:
. . 伪类: :last-child 含义: 结构性伪类,匹配父元素的最后一个子元素,等价于a:nth-last-child(1) 示例:
伪类: :first-of-type 含义: 结构性伪类,匹配父元素的第一个子元素,等价于a:nth-of-type(1) 用法与伪类: :first-child类似。 区别同上 . . 伪类: :last-of-type 含义: 结构性伪类,匹配父元素的最后一个子元素,等价于a:nth-last-of-type(1) 用法与伪类: :last-child类似。 区别同上 . . 伪类: :only-child 含义: 结构性伪类,匹配元素的父元素的唯一子元素,即元素的父元素有且只有一个子元素时,选中这个子元素 等价于
. . 伪类: :only-of-type 含义: 结构性伪类,匹配元素的父元素中使用和元素同种标签的唯一子元素,即元素的父元素有且只有一个使用同种标签子元素时,选中这个子元素 等价于
区别同上 . . 伪类: :empty 含义: 结构性伪类,匹配任意元素,这个元素不包含任何子元素,包括文档节点,即标签中什么都没有,包括空格 示例:
5、否定伪类 否定伪类通过"非"关系来选择元素 结构性伪类只有1个 :not(a) . . 选择器: :not(a) 含义: 否定伪类,匹配所有不是a元素的元素,这里的a必须是一个简单选择器(包括通用元素选择器、标签选择器、类选择器、id选择器、属性选择器和伪类),否定伪类自身不能作为a,即:not(:not())是不合法的 代码简化同上 示例:
6、其他伪类 . . 待补完,原文 /*****************************************************************/ 7、伪元素 . . 待补完,原文 |
关于结构性伪类、否定伪类的更多示例 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元素, 相当于 *(这个选择器在广告过滤中用处不大) 示例:
伪类: :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)
当A≠0,B=0时,:nth-child(An+0)写作:nth-child(An)
伪类: :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)
伪类: :nth-of-type(An+B) 含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的第An+B个子元素 用法与伪类: :nth-child(An+B)类似。 区别: 伪类: :nth-child(An+B)计算父元素中所有标签类型的子元素 伪类: :nth-type(An+B)计算父元素中与自身标签类型相同的子元素 示例: 测试页面: 苦力王篮球 要求过滤标题广告(第一个div#main),分别用这两种伪类来选择
伪类: :nth-last-of-type(An+B) 含义: 结构性伪类,匹配元素的父元素中,使用和元素同种标签的倒数第An+B个子元素 用法与伪类: :nth-last-child(An+B)类似。 区别同上 . . 伪类: :first-child 含义: 结构性伪类,匹配父元素的第一个子元素,等价于a:nth-child(1) 示例:
伪类: :last-child 含义: 结构性伪类,匹配父元素的最后一个子元素,等价于a:nth-last-child(1) 示例:
伪类: :first-of-type 含义: 结构性伪类,匹配父元素的第一个子元素,等价于a:nth-of-type(1) 用法与伪类: :first-child类似。 区别同上 . . 伪类: :last-of-type 含义: 结构性伪类,匹配父元素的最后一个子元素,等价于a:nth-last-of-type(1) 用法与伪类: :last-child类似。 区别同上 . . 伪类: :only-child 含义: 结构性伪类,匹配元素的父元素的唯一子元素,即元素的父元素有且只有一个子元素时,选中这个子元素 等价于
. . 伪类: :only-of-type 含义: 结构性伪类,匹配元素的父元素中使用和元素同种标签的唯一子元素,即元素的父元素有且只有一个使用同种标签子元素时,选中这个子元素 等价于
区别同上 . . 伪类: :empty 含义: 结构性伪类,匹配任意元素,这个元素不包含任何子元素,包括文档节点,即标签中什么都没有,包括空格 示例:
|