CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器
常见的选择器列表图
基本选择器
通配符选择器(*)
元素选择器(E)
类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。
id选择器(#ID)
多元素选择器(E,F)
后代选择器(E F)
子元素选择器(E>F)
IE6不支持子元素选择器。 子元素选择器,匹配所有E元素的子元素F
相邻元素选择器(E + F)
毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
同级元素选择器(E ~ F)
匹配任何在E元素之后的同级F元素
属性选择器
CSS 2.1 属性选择器
[attribute]
用于选取带有指定属性的元素,不考虑该属性的值。
[attribute=value]
用于选取带有指定属性和值的元素。
[attribute~=value]
用于选取属性值中包含指定词汇的元素。
[attribute|=value]
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。该值必须是整个单词,比如 lang="en",或者后面跟着连字符,比如 lang="en-us"。
CSS 3 属性选择器
[attribute^=value]
匹配属性值以指定值开头的每个元素。
[attribute$=value]
匹配属性值以指定值结尾的每个元素。
[attribute*=value]
匹配属性值中包含指定值的每个元素。
伪类选择器
CSS 2.1中的伪类
E:first-child
匹配父元素的第一个子元素
E:link
匹配所有未被点击的链接
链接要按照 link、visited、hover、active 顺序写
E:visited
匹配所有已被点击的链接
E:hover
匹配鼠标悬停其上的E元素
E:active
匹配鼠标已经其上按下、还没有释放的E元素
E:focus
匹配获得当前焦点的E元素
E:lang(c)
匹配lang属性等于c的E元素
CSS 3中与用户界面有关的伪类
E:enabled
匹配表单中激活的元素
E:disabled
匹配表单中禁用的元素
E:checked
匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
E::selection
匹配用户当前选中的元素
CSS 3中的结构性伪类
E:root
匹配文档的根元素,对于HTML文档,就是HTML元素
E:nth-child(n)
匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n)
匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与:nth-child()
作用类似,但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child()
作用类似,但是仅匹配使用同种标签的元素
E:last-child
匹配父元素的最后一个子元素,等同于:nth-last-child(1)
E:first-of-type
匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
E:last-of-type
匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
E:only-child
匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type
匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty
匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
CSS 2.1中的伪元素
E:first-line 匹配E元素的第一行
E:first-letter 匹配E元素的第一个字母
E:before 在E元素之前插入生成的内容
E:after 在E元素之后插入生成的内容
CSS 3的反选伪类
E:not(s)
匹配不符合当前选择器的任何元素
CSS 3中的 :target 伪类
E:target
匹配文档中特定"id"点击后的效果