单个选择器优先级从高到低分别是：
1.!important：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.内联样式：style="..."
3.ID选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
复杂场景优先级需要计算：
按权重由高到低作如下归类：
- 行内样式 <div style="xxx"></div> ==> a
- ID 选择器 ==> b
- 类，属性选择器和伪类选择器 ==> c
- 标签选择器、伪元素 ==> d
当a权重相同的时候，比较b，以此类推，谁的权重大就显示谁的样式
示例：
| 选择器 | 权 重 |
|---|---|
| * | a=0 b=0 c=0 d=1 |
| p | a=0 b=0 c=0 d=1 |
| a:hover | a=0 b=0 c=0 d=2 |
| ul li | a=0 b=0 c=0 d=2 |
| ul ol+li | a=0 b=0 c=0 d=3 |
| h1+input[type=hidden] | a=0 b=0 c=1 d=2 |
| ul ol li.active | a=0 b=0 c=1 d=3 |
| #ct .box p | a=0 b=1 c=1 d=1 |
| div#header:after | a=0 b=1 c=0 d=2 |
| style="" | a=1 b=0 c=0 d=0 |
