CSS 选择器之基本选择器 属性选择器 伪类选择器

CSS 选择器

常见的选择器列表图

CSS选择器笔记

基本选择器

通配符选择器（*）

元素选择器(E)

类选择器（.className）    所有浏览器都支持类选择器，但多类选择器（.className1.className2）不被ie6支持。

id选择器（#ID）

多元素选择器（Ｅ,Ｆ）

后代选择器（Ｅ Ｆ）

子元素选择器(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"点击后的效果