css的优先级之前一直没怎么注意没当回事，总以为对同一元素靠后的渲染会覆盖前面的渲染，要是覆盖不了那就来个!important嘛。直到我那在学前端基础的后端伙伴拿一个问题问住了我，我才意识到这是重点啊！啪啪啪打脸！
引题
先来看css为元素添加样式的几种规则（记住a,b,c,d）
| 标记 |
a |
b |
c |
d |
| 规则 |
使用行内样式style |
使用id选择器 |
使用类、属性、伪类选择器 |
使用元素、伪元素选择器 |
| 例子 |
style="" |
#id |
class 、 [type="submit'] 、 :hover |
p、::after |
引一反三
a,b,c,d分别表示相关规则出现的次数
| 选择符 | a,b,c,d | 优先级 |
| style="" | 1,0,0,0 | 1000 |
| #wrapper #content | 0,2,0,0 | 200 |
| #content .datePosted | 0,1,1,0 | 110 |
| div #content{} | 0,1,0,1 | 101 |
| #content | 0,1,0,0 | 101 |
| p.comment .datePosted{} | 0,0,2,1 | 21 |
| p.comment{} | 0,0,1,1 | 11 |
| div p{} | 0,0,0,2 | 2 |
| p | 0,0,0,1 | 1 |
| .container .row-left | 0,0,3,0 | 30 |
| .col-left | 0,0,1,0 | 10 |