一、CSS选择器
CSS中选择器是一种模式，用于选择需要添加样式的元素。
选择器的基本结构如下
x {
background: red;
}
其中，x是选择器可以是类，ID，元素类型等等，下面会具体探讨，后面的花括号为声明块，对元素样式的声明都包含在其中，每一个属性声明用分号;隔开。
二、CSS选择器类别
CSS中选择器主要分为以下几种：
- 标签选择器
- ID选择器
- 类选择器
- 通用选择器
- 组合选择器
- 继承选择器
- 伪类选择器
- 属性选择器
基本的选择器此处不做赘述，只写几个特殊的。
2.1 后代选择器
.class_name div {
background: red;
}
这里为类名为.class_name的元素包含的所有后代div元素设定样式，且只针对其后代不影响同级或更高级以及其后代div元素。如果我们将下面代码制定这样的CSS样式的话，会发现这里面的子级div和孙级div都会被设置为红色背景。
<div class=".class_name">
<div class="">
<div class="">
</div>
</div>
</div>
有时候并不需要将所有的后代元素都设置同一个样式，比如上面这段，我只想将子级div设置为红色背景，而孙级div并不想套用这样的样式，显然，后代选择器不适应与这种情况，这里可以使用子元素选择器。
.class_name > div {
background: red;
}
如上所示，子元素选择器比后代选择器多了一个大于号>，表示直接做用于子元素，不会应用的子级以后的元素。如果将上面的那段HTML应用这个CSS样式的话，只用第二层的div元素被设置为红色，而最里面的div元素不会套用这种样式。
2.2 伪类选择器
伪类选择器很有意思，利用它可以为HTML文档中一些也许存在，也许不存在的元素结构指定样式。它不像其他选择器利用元素类型、ID或者class等来为元素指定样式，而是用条件选择来指定。具体属性看下表：
| 选择器 | 含义 |
|---|---|
| E:first-child | 选择父元素的第一个子元素 |
| E:link | 匹配所有未被访问的超链接 |
| E:visited | 匹配所有已经被访问的超链接 |
| E:active | 匹配鼠标按下还未被释放的元素 |
| E:hover | 匹配鼠标当前悬停的元素 |
| E:focus | 匹配获得焦点的元素 |
| E:lang(c) | 匹配lang值等于c或者有多个用-隔开的单词构成lang值，且其中包含等于c的单词块的元素 |
以上是常用的伪类选择器，具体说明在表中不再赘述。
2.3 属性选择器
属性选择器是经常用到的选择器，应用范围宽泛，也非常实用。下面用一个表格列出。
| 选择器 | 含义 |
|---|---|
| E[attribute] | 匹配有attribute属性的元素，不考虑其他因素，也可以省略直接匹配所有类型元素 |
| E[attribute =val] | 匹配所有attribute属性等于val的元素 |
| E[attribute ~=val] | 匹配所有attribute属性值中有多个用空格隔开的值，其中包含“val”的元素 |
| E[attribute |=val] | 匹配所有 att 属性具有多个连字号分隔（hyphen-separated）且以 “val” 开头的元素，主要用于 lang 属性，比如 “en”、“en-us”、“en-gb” 等等 |
选择器暂且介绍这么多，基础的选择器想必早已烂熟于心，就不赘述了。
三、优先级与权重
设想一种情况：
一个div长这个样子
<div class=".class_name">
</div>
嗯，只是一个简单的不能再简单的div，再来一个CSS
.class_name {background: red;}
div {background: green;}
* {background: yellow;}
这有点脑壳疼了，一下给那么多选择器设置样式，到底会变成什么背景色呢？这里引出一个选择器特殊性的概念，元素会根据选择性的特殊性来决定所应用样式的次序，特殊性更高的规则样式将会被优先运用。
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4各部分：0,0,0,0。可以看做是一个四位数，一个初始情况下等于0的四位数，具体特殊性规则如下：
- 对于内联样式的声明，其权重为1000
- 对于ID选择器，其权重为100
- 对于类选择器、属性选择、伪类选择，其权重为10
- 对于类型选择器、为元素，其权重为1
- 结合符、通配符没有特殊性贡献
下面给出几个简单的例子：
#id {background: red;} //0,1,0,0
.class_name {background: green;} //0,0,1,0
* {background: yellow;} //0,0,0,0
.class_name #id {color:blue;} //0,1,1,0
p em {background: yellow;} //0,0,0,2
div#id *[href] {background: yellow;} //0,1,1,1
需要注明的是，有时候我们需要一个元素权重特别大，大到任何选择器都无法影响的地步。重要声明可以满足要求，它长这样：!important，形象一点说!important的权重约等于无穷。下面是它的用法
.class_name {
background: red !important;
}
在一条声明的后面，分号前插入一个!impotant即可，如果有多条声明需要重要，那么每一条都要写。
