场景
为什么我在这里设置的css样式不起作用？
可能你在某处定义了一个更高权重的规则，导致此处规则不生效。
什么是权重
实际上它就是CSS的优先级啊，它决定了你css规则怎样被浏览器解析直到生效。
- 权重还是可以叠加的，比如说：
权重的级别根据选择器被划分为四个分类：
行内样式，id，类与属性，以及元素.
我们经常会写
.test div{…}
这个的权重就会叠加。
- 权重的选择和定义的顺序有关
如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则)
优先级
行内样式>id>类与属性>元素
当然我们也见过这样的
.a{color:red !importent;}
!important用于单独指定某条样式中的单个属性。
对于被指定的属性，有!important指定的权重值大于所有未用!important指定的规则。
但是我们一般是不会使用的，因为这样的写法会对项目交接有很大的阻碍。
下面来说一下元素
元素跟伪元素选择器：
伪元素选择器只包含以下几种:
::after
::before
::first-letter
::first-line
::selecton
伪元素跟伪类都是选择器的补充
伪类表示的是一种“状态”：比如hover，active等等；
伪元素表示文档的某个确定部分的表现：比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。
如何确定权重
权重记忆口诀。
从0开始，
一个行内样式+1000，
一个id+100，
一个属性选择器/class或者伪类+10，
一个元素名，或者伪元素+1.
权重.png
参考
http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
