文章主要介绍什么是CSS选择器，CSS选择器的分类以及CSS选择器的优先级三部分内容，希望能够帮助到正在学习CSS的童鞋，有什么不足的地方欢迎大家批评指正。
一、什么是CSS选择器？
CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。
二、CSS选择器的分类
1.基础选择器
a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。
HTML
<div id="header">我的前端学习之旅</div>
CSS
header{color:blue;}
执行效果：
b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。
HTML
<div class="header">我的前端学习之旅</div>
CSS
.header{color:green;}
执行效果：
c.元素选择器：通过note节点名称匹配元素。
HTML
<span> Here is a span.</span>
CSS
执行效果：span{
background-color:blue;
border:1px solid #ccc;
}
2.属性选择器：
| 选择器 | 含义 | 实例 |
|---|---|---|
| E[attr] | 匹配所有具有属性attr的元素 | p[title] { color:#f00; } |
| E[att=val] | 匹配所有att属性等于"val"的E元素 | div[class=error] { color:#f00; } |
| E[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素 | td[headers~=col1] { color:#f00; } |
| E[att/=val] | 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的E元素，主要用于lang属性，比如"en"、"en-us"、"en-gb"等等 | p[lang/=en] { color:#f00; } |
注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。
CSS3新增了一些属性选择器，待持续更新。
3.组合选择器
| 选择器 | 含义 | 实例 |
|---|---|---|
| E,F | 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 | div,p { border:1px solid #ccc;} |
| E F | 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | div p{color:red;} |
| E > F | 子元素选择器，匹配所有E元素的子元素F | div > strong { color:#f00; } |
| E + F | 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F | p + p { color:#f00; } |
示例如下：
实现效果如下：
4.伪类选择器
| 选择器 | 含义 | 实例 |
|---|---|---|
| E:first-child | 匹配父元素的第一个子元素 | p:first-child { font-style:italic; } |
| E:link | 匹配所有未被点击的链接 | |
| E:visited | 匹配所有已被点击的链接 | |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 | |
| E:hover | 匹配鼠标悬停其上的E元素 | input[type=text]:focus:hover { background:#fff; } |
| E:focus | 匹配获得当前焦点的E元素 | input[type=text]:focus { color:#000; background:#ffe; } |
| E:lang(c) | 匹配lang属性等于c的E元素 | q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } |
示例如下：
执行效果：
鼠标点击之前：
鼠标点击之后：
CSS3新增的一些伪类选择器之后会持续更新的，敬请期待。
三、选择器的优先级
从高到低依次是：
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
实际上，同一个元素可以使用多个规则来指定它的字体颜色，每个规则都有自己的选择器。显然最终只有一个规则起作用（不可能一个字既是红色又是绿色），那么该规则的特殊性最高，特殊性即css优先级。那么CSS的优先级怎么计算呢？
选择器的特殊性值表述为4个部分，用0,0,0,0表示。
- ID选择器的特殊性值，加0,1,0,0;
- 类选择器、属性选择器或伪类，加0,0,1,0;
- 元素和伪元素，加0,0,0,1;
- 通配选择器对特殊性没有贡献，即0,0,0,0;
- 最后比较特殊的一个标志!important(权重)，它没有特殊值，但是他的优先级是最高的，为了方便记忆，可认为他的默认值是1,0,0,0.
示例如下：
执行效果：
选择器的特殊性值是从左向右排列的
先说到这里吧，有什么问题欢迎大家指正，剩下的内容稍后会在wlf'Blog更新，敬请关注。
参考：
1.css优先级计算规则
2.CSS选择器笔记
3.Selectors MDN
4.CSS3 选择器——基本选择器
5.CSS3 选择器——伪类选择器
6.征服高级CSS选择器
