CSS选择器

一、CSS有多少选择器

CSS选择器分为五类：

（1）元素选择器（4个）

（2）关系选择器（4个）

（3）属性选择器（7个）

（4）伪类选择器（26个）

（5）伪对象选择器（5个）

1. 元素选择器（4个）

选择器

名称

版本

兼容性（>=）

简介

*

通配符选择器

CSS2

IE7

E

元素选择器

CSS1

IE6

#id

id选择器

CSS1

IE6

.class

类选择器

CSS1

IE6

2. 关系选择器（4个）

选择器

名称

版本

兼容性（>=）

简介

E  F

后代选择器CSS1IE6

E的所有后代F

E > F

直接子元素选择器CSS2IE7

E的直接子元素F

E + F

相邻兄弟选择器CSS2IE7

紧贴在E之后的F，E与F之间没有其他元素

E ~ F

兄弟选择器CSS2

IE7

E之后的所有兄弟F

3. 属性选择器（7个）

选择器

名称

版本

兼容性（>=）

简介

E[attr]

CSS2IE7

有attr属性的元素E

E[attr="val"]

CSS2IE7有attr属性并且其值为val的元素E

E[attr~="val"]

CSS2IE7

attr的值以1个或多个单词组成，其中一个为val

E[attr^="val"]

CSS3

IE7

attr的值为以val开头的字符串（包括多个单词的形式）

E[attr$="val"]

CSS3

IE7

attr的值为以val结尾的字符串

E[attr*="val"]

CSS3

IE7

attr的值为包含val的字符串

E[attr|="val"]

CSS2

IE7

attr的值为以val-开头的字符串

4. 伪类选择器（26个）

选择器

名称

版本

兼容性（>=）

简介

a:link

CSS1IE6

a:visited

CSS1IE6

E:active

CSS1/2IE6、7只支持a标签的:active

E:hover

CSS1/2IE6只支持a标签的:hover

E:first-child

CSS2IE7E的父元素的第一个子元素是E

E:last-child

CSS3IE9

E:only-child

CSS3IE9

E:nth-child(n)

CSS3IE9

E的父元素的第n个子元素是E，其父元素的所有子元素都参与从1开始编号（与nth-of-type不同）。

E:nth-last-child(n)

CSS3IE9

E:first-of-type

CSS3

IE9

E:last-of-type

CSS3

IE9

E:only-of-type

CSS3

IE9

E:nth-of-type(n)

CSS3

IE9

同级的E元素从1开始编号连续编号，中间如果有其他元素则忽略。

E:nth-last-of-type(n)

CSS3

IE9

E:focus

CSS1/2

IE8

设置对象在成为焦点（该对象的onfocus事件发生）时的样式。

E:lang()

CSS2

IE8

匹配使用特殊语言的E元素。

E:root

CSS3

IE9

匹配E元素在文档的根元素。在HTML中，根元素永远是HTML。

E:not()

CSS3

IE9

不含特定选拔器的E

E:empty

CSS3

IE9

E没有任何元素，包括text节点

E:checked

CSS3

IE9

选中状态：type=radio/checkbox时

E:enabled

CSS3

IE9

用于表单

E:disabled

CSS3

IE9

用于表单

E:target

CSS3

IE9

当前页面或其他页面从锚文本跳转到指定E时@page:first

打印样式

@page:left

打印样式

@page:right

打印样式

a伪类的正确顺序：a:link、a:visited、a:hover、a:active。

5. 伪对象选择器（5个）

选择器

名称

版本

兼容性（>=）

简介

E:first-letter

CSS1IE7

E::first-letter

CSS3IE9

E:first-line

CSS1IE7

E::first-line

CSS3IE9

E:before

CSS2IE8

E::before

CSS3IE9

E:after

CSS2IE8

E::after

CSS3

IE9

E::selection

CSS3

IE9

:after/::after和:before/::before要与content属性一起使用，且content的值一定要加引号。

二、选择器的权值及优先级

选择器的优先级是根据选择器的权值计算的。

各选择器的权值：

（1）继承的权值为0，继承是浏览器的行为，优先级小于用户指定。有一些样式不能被继承。

（2）通配符的权值为0。会覆盖权值同样为0的继承样式。
（3）元素、伪元素的权值为1。
（4）类选择器、属性选择符（是[attr=value]，不是E[attr=value]）、伪类（是:hover，不是E:hover）的权值为10。
（5）id选择器的权值为100。
（6）!import为1000。
（7）行间为1000。

内联和外部引入级别相同。