CSS权重问题

1. 什么是CSS权重？

1. 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。
2. 当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。
3. 每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。

4. 如果两个选择器同时作用到一个元素上，权重高者生效。

2. 权重等级

每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类，也决定了四种不同等级的权重值。

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. *{}                         ====》0
02. 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