CSS基础知识点--选择器

种类

• 标签选择器

• 类选择器

• ID选择器

• 全局选择器

• 群组选择器

• 后代选择器

伪类选择器

• 伪类选择器定义特殊状态下的样式

• 无法用标签、id、class及其他属性实现

链接伪类

链接的4种状态：激活状态，已访问状态，未访问状态和鼠标悬停状态

伪类	说明
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标悬停状态
:active	激活的链接

链接伪类的顺序

:link > :visited > :hover > :active

说明：

1. a:hover必须置于a:link和a:visited之后，才有效

2. a:active必须置于a:hover之后，才有效

3. 伪类名称对大小写不敏感

伪类:hover和:active

1. :hover用于访问的鼠标经过某个元素时

2. :active用于一个元素被激活时（即按下鼠标之后放开鼠标之前的时间）

伪类:hover和:active兼容

• IE6及更早版本，支持元素的4种状态

• IE6浏览器不支持元素的:hover和:active

CSS层叠

• 可以定义多个样式

• 不冲突时，多个样式课层叠为一个

• 冲突时，按不同样式规则优先级来应用样式

CSS选择器优先级

id选择器 > class选择器 > 标签选择器 > 通配符

同一元素使用相同类型的选择器定义相同类型样式，优先级按就近原则

CSS优先级规则

同一样式表中：

1. 权值相同

• 就近原则（离被设置元素越近优先级越高）

2. 权值不同

• 根据权值来判断CSS样式

• 哪种CSS样式权值越高，就使用哪种样式

选择器权值

选择器	权值
标签选择器	1
类选择器	10
伪类	10
ID选择器	100
通配符选择器	0
行内样式	1000

权值规则

1. 统计不同选择器的个数

2. 每类选择器的个数乘以相应权值

3. 把所有的值相加得出选择器的权值

!important规则

• 可调整样式规则的优先级，使其权值最高

• 添加在样式规则之后，中间用空格隔开

CSS样式命名规则

• 采用英文字母、数字以及"-"和"_"命名

• 以小写字母开头，不能以数字和"-"、"_"开头

• 命名形式：单字，连字符，下划线和驼峰

• 使用有意义命名