每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类，也决定了四种不同等级的权重值。
1、行内样式，指的是html文档中定义的style
行内样式包含在你的html中 对你的元素产生直接作用，比如:
<h1 style="color: #fff;">header</h1>2、ID选择器
Id也是元素的一种标识，比如#div
3、类，属性选择器和伪类选择器
这一类包括各种class，属性选择器，伪类选择器比如 :hover,:focus等等。
4、元素和伪元素
元素跟伪元素选择器，比如:before 与 :after.
权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1（通配符*的值为0）
01. *{} ====》002. li{} ====》1(一个元素)03. li:first-line{} ====》2(一个元素，一个伪元素)04. ul li {} ====》2（两个元素）05. ul ol+li{} ====》3（三个元素）06. h1+ *[rel=up] {} ====》11（一个属性选择器，一个元素）07. ul ol li.red{} ====》13（一个类，三个元素）08. li.red.level{} ====》21（两个类，一个元素）09. style="" ====》1000(一个行内样式)10. p {} ====》1（一个元素）11. div p {} ====》2（两个元素）12. .sith {} ====》10（一个类）13. div p.sith{} ====》12（一个类，两个元素）14. #sith{} ====》100（一个ID选择器）15. body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器，一个类，两个元素) 3 权重的基本规则1、相同的权重：以后面出现的选择器为最后规则（比如写了相同的两个样式 #content h1 {color:red} ）
2、不同的权重，权重值高则生效
3.！important（无限大）>行内样式（权重1000）>id选择器（权重100）>类选择器（10）=伪类选择器（10）=属性选择器（10）>元素选择器（1）>通用选择器（0）>继承的样式>浏览器默认的样式。
4.元素选择器相加永远没有类选择器的权重大。
选择器可能会包含一个或者多个与权重相关的计算点，若经过计算得到的权重值越大，则认为这个选择器的权重高
tips:
利用LVHA原理来给链接应用样式：如果你想展现不同状态的链接样式，一定要记住link-visited-hover-active的顺序，或者简写为LVHA
文章参考：http://www.w3cplus.com/css/css-specificity-things-you-should-know.html