CSS选择器

优先级

1.在属性后面使用!important会覆盖页面内任何位置定义的样式

2.作为style属性写在元素内的样式

3.id选择器

4.类选择器

5.标签选择器

6.通配符选择器 *

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：*代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

同一级别，后面的会覆盖前面的样式

基础选择器

*:通用元素选择器

#id：匹配特定id元素

.class：匹配class类的元素

element：标签选择器

组合选择器

E,F : 多元素选择器（逗号分隔）

E F ：后代选择器 （空格分隔）E的所有后代F

E>F : 直接子元素选择器 E的所有直接子元素

E+F ：直接相邻选择器 E之后的相邻的同级元素F

E~F ：普通相邻选择器 E之后的所有同级元素F

属性选择器

E[attr] ：匹配具有attr属性的所有元素

E[attr = value] ：匹配attr属性为value的所有元素

E[attr ~= value] ：匹配attr属性有多个空格分隔，其中一个值为value的所有元素

E[attr

= value] ：匹配attr属性有多个“-”分隔，其中一个值为value的所有元素(测试 不好使。。)

E[attr ^= value] ：匹配attr属性以value开头的所有元素 （开头就行，是不是一个词都行）

E[attr $= value] ：匹配attr属性以value结尾的所有元素

E[attr *= value] ：匹配attr属性包含value的所有元素 （包含value字就行）

伪类选择器

E:first-child 匹配E的父元素的第1个子元素

E:link 选择未被访问的链接

E:visited 已访问的链接

E:hover 鼠标移动到链接上

E:focus 选择获得焦点的输入字段

E:active 选定的链接

E:nth-child(n) 匹配E的父元素的第n个子元素，第一个编号为1

E:nth-last-child(n) 匹配E的父元素的倒数第n个子元素，最后一个编号为1

E:last-child 匹配父元素的最后一个子元素，等同于nth-last-child(1)

E:root 匹配文档的根元素

伪元素选择器

E:first-line 匹配E元素内容的第一行

E:first-letter 匹配E元素内容的第一个字母

E:before 在E元素之前插入生成的内容 （用content：插入）

E:after 在E元素之后插入生成的内容

书写CSS要注意的问题

1.选择器是 从右到左解析的。

2.ID最快，通配符最慢。解析速度由快到慢：ID，class，tag，通配符。

3.不要ul #main{…},因为ID已经唯一，不需要tag在标识，会使速度变慢。

4.后代选择器最糟糕。类似 html body ul

5.ID是最快的，但不能为了效率而牺牲可读性和可维护性。