在实际开发中，常常需要变更样式或切换样式，比如交互样式的设置或动画样式设置，这时候就涉及到样式的覆盖问题。
在同一个选择器下，后面的样式会覆盖前面的样式，但在不同的选择器下，就要讲究优先级了，比如以下的例子
div.test {
font-size: 16px;
color: red;
}
div {
color: blue;
}字体颜色为蓝色是后面定义的，但它的优先级比较低，无法覆盖之前的样式。
以下是我经过多次试验得出的结论
| 选择器 | 优先级 | 描述 |
|---|---|---|
| * | 00000 | 星号优先级最低 |
| div | 00001 | 标签选择器占个位 |
| div p span | 00003 | 几个标签选择器，个位就为几 |
| div > p ~ strong | 00003 | 添加关系符并不会增加优先级 |
| .box | 00010 | 类选择器占十位 |
| .box.active | 00020 | 几个类选择器，十位数就为几 |
| div.box.active | 00021 | 类选择器可与标签选择器优先级叠加 |
| div[value="xx"] | 00011 | 属性选择器优先级算法与类选择器一样 |
| div:first-child | 00011 | 伪类选择器优先级算法与类选择器一样 |
| #main | 00100 | ID选择器占百位 |
| #main#floor1 | 00200 | 几个ID选择器，百位数就为几 |
| div#main.box | 00111 | 各个选择器可以混用 |
| 行内样式 | 01000 | 行内选择器占千位 |
| 含有!important的样式 | 10000 | important占万位 |
优先级相同的，后面定义的会覆盖前面的
