浅谈css权重

什么是css权重？

在同一个元素使用不同的方式，声明了相同的一条或多条css规则，浏览器会通过权重来判断哪一种方式的声明，与这个元素最为相关，从而在该元素上应用这个声明方式声明的所有css规则。css每条规则权重的不同， 权重决定了哪一条规则会被浏览器应用在元素上。

权重等级

1. !important;

2. 行内样式;

   <h1 style="color: #eee;">hello</h1>

3. ID选择器, 权重:100;

   Id也是元素的一种标识，比如#div

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

   这一类包括各种class，属性选择器，伪类选择器比如 :hover,:focus等等

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

   伪元素选择器： :before :after

等级关系

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

权重规则

1. 不推荐使用!important

   因为根本没有结构与上下文可言，并且很多时候权重的问题，就是因为不知道在哪里定义了一个!important而导致的。

2. 覆盖!important

   //!important 优先级最高，但也会被权重高的important所覆盖
   <div id="a" class="a">aaa</div>
   #a{
     font-size: 12px  !important;  /* id的important覆盖class的important( ID选择器 > 类选择器 ) */
   }
   .a{
     font-size: 16px  !important;
   }
   

3. 行内样式总会覆盖外部样式表的任何样式(除了!important)

   !important > 行内样式 > 外部样式表

4. 不能跨等级使css规则生效

   无论多少个class组成的选择器，都没有一个ID选择器权重高。无论多少个元素组成的选择器，都没有一个class选择器权重高、 无论多少个ID组成的选择器，都没有行内样式权重高。

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

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

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

6. 如果两个相同权重的选择器作用在同一元素上，则以最后面出现的选择器生效

   <div id="one">
     <div class="test" id="test">
       <span>测试</span>
     </div>
   </div>
   <style>
   #test span{
     font-size: 12px;
   }
   #app span{ //生效
     font-size: 14px;
   }
   </style>
   

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

   <link href="mystyle.css" rel="stylesheet" type="text/css"/>
   ------------------------------------------------------------
   mystyle.css
   ------------------------------------------------------------
   #test { // css样式表中!
     background: red;
   }
   ------------------------------------------------------------
   <style type="text/css">
     #test { // html头部 离元素更近，所以生效!
       background: blue;
     }
   </style>
   <button id="test">测试</button>
   

总结

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