CSS选择器

id选择器匹配特定id的元素，在整个页面中是唯一的。
class是类选择器，匹配包含(不是等于)特定类的元素。

选择器从高到低分别是

复杂场景优先级计算
选择器的特殊性分为4个等级，a b c d，从左到右，越左边的越优先, 如果一个选择器规则有多个相同类型选择器，则+1。等级如下：
行内样式

==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d

正确顺序应为：a：link a：visited a:hover a:active

原因：

.#header{}：匹配Id=header的元素
.header{}:匹配类class=header的元素
header .logo{}：
匹配类为header元素的后代元素中类为logo的元素
.header.mobile{}：
匹配class同时包含header和mobile的元素
.header p, .header h3{}：
匹配两个类型的元素（并集，‘或’关系），类型1是header类的后代p标签，类型2是header类的后代h3标签
.#header .nav>li{}：
匹配id为header的后代中，类名为nav的直接子元素中的li标签
.#header a:hover{}：
匹配id为header的后代a标签在hover状态（鼠标悬停其上）下的样式
.#header .logo~p{}：
匹配id为header的后代中，类名为logo的元素之后的同级元素中的p标签
.#header input[type="text"]{}
id为header的后代中，input标签中属性type的值为"text"的元素集合

选择器	含义
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	匹配用户当前选中的元素

 aa
 bb
 ccc

结果：

QQ截图20170227221048.png

原因：

.item1:first-child选中的是类名位item1的父元素div下的第一个元素则为p标签里面的aa，所有aa显示为红色
.item1:first-of-type选中的是类名为item1的父元素div下的同类元素的第一个元素，即p元素中的第一个p元素里面的aa和2个h3元素中的第一个h3元素里的内容bb，所有aa和bb的背景色为蓝色。