class 和 id 的使用场景?
- 类class选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。
- ID 选择器允许以一种独立于文档元素的方式来指定样式。
- 只能在文档中使用一次
- 不能使用 ID 词列表
- ID 能包含更多含义
CSS选择器常见的有几种?
-
基础选择器
* /通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）/
#id i/d选择器，匹配特定id的元素/
.class /类选择器，匹配class包含(不是等于)特定类的元素/
element /标签选择器/ -
组合选择器
E,F /多元素选择器，用,分隔，同时匹配元素E或元素F/
E F /后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子
元素向下递归）元素F/
E>F /子元素选择器，用>分隔，匹配E元素的所有直接子元素/
E+F /直接相邻选择器，匹配E元素之后的相邻的同级元素F/
E~F /普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直
接相邻与否）/
.class1.class2 /id和class选择器和选择器连写的时候中间没有分隔符，. 和 #
本身充当分隔符的元素/
element#id /id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身
充当分隔符的元素/ -
属性选择器
E[attr] /匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div/
E[attr = value] /匹配属性attr值为value的元素，div[id=test],匹配id=test的div/
E[attr ~= value] /匹配所有属性attr具有多个空格分隔、其中一个值等于value的
元素/
E[attr ^= value] /匹配属性attr的值以value开头的元素/
E[attr $= value] /匹配属性attr的值以value结尾的元素/
E[attr = value] /匹配属性attr的值包含value的元素*/ -
伪类选择器
E:first-child /匹配作为长子（第一个子女）的元素E/
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: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::first-line /匹配E元素内容的第一行/
E::first-letter /匹配E元素内容的第一个字母/
E::before /在E元素之前插入生成的内容/
E::after /在E元素之后插入生成的内容/
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
从高到低的分别是：
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景的计算优先级
- ID选择器的特殊性值，加0,1,0,0。
- 类选择器、属性选择器或伪类，加0,0,1,0。
- 元素和伪元素，加0,0,0,1。
- 通配选择器*对特殊性没有贡献，即0,0,0,0。
- 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
a{color: yellow;} /特殊性值：0,0,0,1/
div a{color: green;} /特殊性值：0,0,0,2/
.demo a{color: black;} /特殊性值：0,0,1,1/
.demo input[type="text"]{color: blue;} /特殊性值：0,0,2,1/
.demo [type="text"]{color: grey;} /特殊性值：0,0,2,0/
#demo a{color: orange;} /特殊性值：0,1,0,1/
div#demo a{color: red;} /特殊性值：0,1,0,2/
选择器特殊性值是从左向右排序*的，特殊性值1,0,0,0大于以0开头的所有特殊性值，即便它是0,99,99,99，优先级依然比1,0,0,0要低。
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
正确的顺序（爱恨原则）-- LVHA
- a:link{color:red;} 未访问的链接
- a:visited{color:blue;} 已访问的链接
- a:hover{color:yellow;} 鼠标划过链接
- a:active 已选中的链接
浏览器解释CSS时遵循的“就近原则”。
在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。
- 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义
- 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义
以下选择器分别是什么意思?
列出你知道的伪类选择器
E:first-child: 匹配元素E中的第一个元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:last-child 匹配元素E中倒数的第一个元素
E:nth-last-child(n) 匹配其父元素倒数的第n个子元素，第一个编号为1
E:nth-of-type(n) 匹配使用同种标签的元素
E:nth-last-of-type(n) 匹配使用同种标签的元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于
E:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于
E:nth-last-of-type(1)div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 **
div:first-child和div :first-child**的作用和区别
作用：选择属于其父元素的首个子元素的每个 <div> 元素
作用： 匹配元素div中的第一个元素
div:first-of-type和div :first-of-type的作用和区别
作用： 父元素的首个 div元素
作用：匹配元素div中同种标签下的第一个元素
- 运行如下代码，解析下输出样式的原因。
运行效果：
输入样式原因：
- 父元素下第一个元素是aa，颜色为red。
- 父元素下拥有同种标签的第一个元素背景色为blue，p标签为aa，h3标签下第一个元素是bb。
参考
http://www.cnblogs.com/wangmeijian/p/4207433.html
http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/09/06/1819624.html
