class 和 id 有什么区别:
在同一页面内：

• id只能出现一次，class可以重复使用
• id的权值(优先级)比class高，浏览器会优先渲染ID的样式
• id是先找到内容，再定义样式，class是先定义好样式，再套用给多个内容。
• id是一个元素的唯一属性，只能定义一次，而一个元素可以定于多个class，套用多个样式
• class可以用于使用重复样式，比如页面内部几个结构需要使用同样的字体、颜色等

标签选择器用于很少的情况下，比如所有样式的重置

1、id选择器
2、class选择器
3、属性选择器
4、分组选择器
5、派生选择器
6、直接子元素选择器

CSS3选择器:first-of-type 从一组中选择第一个元素
:last-of-type 从一组中选择最后一个元素

伪类选择器

伪类选择器:
:link 定义a元素未被点击链接的样式。
:visited 定义a元素已被点击链接的样式。
:active 定义鼠标已经在其上按下、还没有释放的元素样式。
:hover 定义鼠标悬停其上的元素的样式。
:nth-child(n) 定义其父元素的第n个子元素，第一个编号为1。
:first-child 定于元素的第一个子元素的样式，等同于nth-child(1)。
例子：.box>h1:first-child{}：定义.box下第一个子元素为h1的样式，如果第一个子元素不是h1则没有样式显示
:nth-of-type(n) 定义父元素下使用同种标签的元素的样式。
:first-of-type 定义父元素下使用同种标签的第一个子元素的样式，等同于:nth-of-type(1)。
例子：.box>h1:first-of-type{}：对.box下所有的h1子元素当中的第一个h1元素定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

>E:first-child	匹配元素E的第一个子元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于
div>h1:first-child;选择div下第一个孩子是h1的元素，如果不是h1则不会效果
div>h1:first-of-type	；选择div下所有h1当中的第一个h1
input[type=“text”]，属性选择器，针对某个特定用户设置样式或者[data="index.html"]针对某个特定页面
>E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素
E:nth-child(n)	匹配其父元素的第n个子元素并且第n个是E，第一个编号为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	匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector)	匹配不符合当前选择器的任何元素

属性选择器

E[attr = value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div
chrome调试伪类选择器，比如hover（鼠标放上去才能调），点右上角“小图钉”样式可以出现调试
< a class=”button” href=”javascript:void(0)”>确定，调用js，阻止按钮的跳转行为
marging：0 auto；左右自适应实现水平居中只针对块级元素

##CSS优先级
从高到低分别是

在属性后面使用 !important, 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义