前言

css权重很多人都听过，也了解一些，但是很多人对具体的规则或者说再深如一些关于css权重的问题，可能会不那么清楚。日常开发中，或多或少都会遇到css规则不生效的问题，为了让我们能够减少调试css规则的时间，深刻理解css权重，就十分关键了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。

个人博客了解一下：

权重规则总结:

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

css权重优先级用来干嘛？

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

权重的五个等级及其权重

• !important;

• 行内样式;

• ID选择器, 权重:100;

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

.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.如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则.

     
      
      
        
       啦啦啦      
      
    
     
    #test span{      color:blue;    }    #app span{ // 生效 因为后面出现      color: red;    }

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

比如不同的style表，head头部等,来看下面的栗子：