class 和 id 的使用场景?
-
id 选择器
指定标签的唯一标识。1 格式：<input type=password id="userpwd" /> 2 应用场景： A:根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id) B:用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此 label标签时，id为userid的标签获得焦点。 3 特性 id属性的值，在当前的page页面要是唯一的。 -
class
指定标签的类名。1 格式：<input type=button class="btnsubmit" /> 2 应用场景： CSS操作，把一些特定样式放到一个class类中，需要此样式的标签， 可以在添加此类。 3 特性： 可以把多个类，放在一个class属性里，但必须用空格隔开；如：class='btnsubmit btnopen'
选择器类型
- 基础选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
优先级
概念:
浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器
1.优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
2.而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。
3.当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆
盖（take over）该元素从祖先元素继承而来的规则。
对于复杂场景采用不同样式分级计数的方法来评判优先级：
行内样式为第一级；
id选择器为第二级；
类选择器、属性选择器和伪类选择器为第三极；
标签选择器和伪元素选择器为第四级；
先比较连个样式第一级选择器的个数，个数多的优先，相同则比较下级，依次比较，选出优先级高的样式。
!important 规则例外
* 当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其他声明。虽然技术上很重要与特
异性无关，但它与它直接相关。
* 使用 !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则 使得调试找
bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有
优先级的声明将会被采用。
一些经验法则：
* Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
* Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
* Never 永远不要在全站范围的 css 上使用 !important
* Never 永远不要在你的插件中使用 !important
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、
:hover、:active，并且这四个伪类如果对同一个元素设置同一个属性，那它们的声明顺序还有一定要求，
一般大家都遵循“爱恨原则LVHA”（LoVe HAte），为什么是这个顺序？不能是其它顺序吗？
根据css优先级计算规则，伪类的特殊性值是0,0,1,0，4个伪类的特殊性值相同，那么后面声明的规则
优先级高。当鼠标滑过a链接时，满足:link和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类
在:link伪类后面声明；同理，当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显
示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。
这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问
过，不可能同时满足，也就不存在覆盖的问题。
常见的伪类选择器有:
| 选择器 | 含义 |
|---|---|
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:lang(c) | 匹配lang属性等于c的E元素 |
| E:enabled | 匹配表单中可用的元素 |
| E:disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配表单中被选中的radio或checkbox元素 |
| E::selection | 匹配用户当前选中的元素 |
| 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:first-child | 匹配作为长子（第一个子女）的元素E |
| E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
不加空格是同级 加了空格的是后代
div:first-child: 选择这个div的父元素的 第一个div子元素
div:first-of-type: 选择这个div的父元素的 的第一个div子元素
div :first-child: 选择这个div的 子元素的父元素的第一个子元素 也就是这个div的第一个子元素
div :first-of-type: 选择这个div的第一个div子元素
