从 CSS 的权重规则看选择器及优先级

一、CSS权重规则

---

  CSS 的权重规则是学习 CSS 时非常重要的一个概念，每个选择器都有自己的权重。每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，权重是一个决定哪种规则生效，或者是优先级的过程 ，因此了解权重规则，可以很好地理解 CSS中的选择器及其优先级，而不用去背繁杂的优先级规则。

二、权重等级

---

  一般来说，根据选择器的不同，我们将权重等级分为4个等级：

1. 内联样式

  如： <div class="box" id="box1" style="width: 100px; height: 60px"></div>，此项权值为1000.

2.ID选择器

  如上例使用 #box1，权值为100

3.类，伪类和属性选择器

• 类选择器如上例使用 .box；
• 伪类选择器如 :hover, :link, :visited, :active，以及CSS3中新增的一些伪类选择器；
• 属性选择器如[class = "box"]，[id = "box1"]

权值为10

CSS3新增伪类举例：
- p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。
- p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。
- p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。
- p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。
- p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。
- :enabled、:disabled 控制表单控件的禁用状态。
- :checked 单选框或复选框被选中。

4.元素选择器和伪元素选择器

• 元素选择器如 div，p之类的
• 伪元素选择器如 ::before，::after之类的

权值为1

三、基本比较规则

根据上面列出的4个权重等级，把所有等级的值相加得出选择器的权重值。

牛刀小试：

 *{}                         ====》0
 li{}                        ====》1(一个元素)
 li:first-line{}             ====》2(一个元素，一个伪元素)
 ul li {}                    ====》2（两个元素）
 ul ol+li{}                  ====》3（三个元素）
 h1+ *[rel=up] {}            ====》11（一个属性选择器，一个元素）
 ul ol li.red{}              ====》13（一个类，三个元素）
 li.red.level{}              ====》21（两个类，一个元素）
 style=""                    ====》1000(一个行内样式)
 p {}                        ====》1（一个元素）
 div p {}                    ====》2（两个元素）
 .sith {}                    ====》10（一个类）
 div p.sith{}                ====》12（一个类，两个元素）
 #sith{}                     ====》100（一个ID选择器）
 body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)

基本规则

1、相同的权重：以后面出现的选择器为最后规则；
2、不同的权重，权重值高则生效；
3、!important最大，会覆盖所有