CSS选择器权重

权重规则概述：

1. !important 优先级最高，但也会被权重高的important所覆盖
2. 行内样式总会覆盖外部样式表的任何样式(除了!important)
3. 单独使用一个选择器的时候，不能跨等级使css规则生效
4. 如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效
5. 如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则.
6. 权重相同时，与元素距离近的选择器生

权重等级划分：

• !important;

• 行内样式;

• ID选择器, 权重:100;

• class,属性选择器和伪类选择器，权重:10;

属性选择器指的是:根据元素的属性及属性值来选择元素，比如button的type属性等。 伪类选择器: :active :focus等选项

• 标签选择器和伪元素选择器，权重:1;

伪元素选择器： :before :after

一句话总结：

!important > 行内样式 > ID选择器 > (类选择器 | 属性选择器 | 伪类选择器 )> 元素选择器

CSS选择起权重优先级到底做什么的：

在同一个元素使用不同的方式，声明了相同的一条或多条css规则，浏览器会通过权重来判断哪一种方式的声明，与这个元素最为相关，从而在该元素上应用这个声明方式声明的所有css规则。深刻理解css权重，能够减少调试css规则的时间。

使用细则：

1. 不推荐使用!important；

2. 行内样式总会覆盖外部样式表的任何样式,会被!important覆盖；

3. 单独使用一个选择器的时候，不能跨等级使css规则生效

无论多少个class组成的选择器，都没有一个ID选择器权重高(据张鑫旭大神说256个class选择器可以干掉1个id选择器)。类似的，无论多少个元素组成的选择器，都没有一个class选择器权重高、无论多少个ID组成的选择器，都没有行内样式权重高。
传送门 在demo中使用了11个class组成一个选择器，最后还是一个ID选择器，设置的样式生效

4. 如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效

经过权重值计算得到的权重值越大，则认为这个选择器的权重高

.test #test{ } // id 100+class 10=110;
.test #test span{} // id 100+class 10+span 1=111;
.test #test .sonClass{} // id 100+class 10+class 10=120; //生效

5. 如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则

<div id="app">
  <div class="test" id="test">
    <span >啦啦啦</span>
  </div>
</div>
#test span{
   color:blue;
}
#app span{ // 生效 因为后面出现
   color: red;
}

6. 权重相同时，与元素距离近的选择器生效

#content h1 { // css样式表中
   padding: 5px;
}
<style type="text/css">
   #content h1 { // html头部 因为html头部离元素更近一点，所以生效
     padding: 10px;
  }
</style>