一、前言

最近接手了一个旧项目，好家伙，css这方面我是真服了这个老六，样式基本都是全局样式，还这写一处，那写一处的，类名基本上也是默认的element组件名，最可恨的还是 !important这个属性的滥用。导致我在页面写的很多样式都被强制覆盖了，所以今天就来盘点下css的权值。

二、css的权值

1、css权值的作用

css的权值，说白了就是优先级，如果网页元素只有一个样式，那就无所谓权值，

但如果有多个相同的样式同时作用到一个网页元素上，那权值的作用就体现出来了，

权值高者，浏览器就显示这个权值对应的css样式。

2、权值的等级和计算

权值基本上可以分成好几个等级，按等级来计算权重值。

1、!important

 用法是跟在样式后面
 
 权值+10000，是最高的权重，万恶之源，非必要情况建议少用     

2、内联样式

 用法是  style="样式内容" ，直接写在html的标签里
 
 权值+1000

3、id选择器

 用法是  #id名
 
 权值+100

4、类、伪类、属性选择器

用法是  .class名   :hover等

权值 +10

5、标签选择器、伪元素选择器

 用法是  div span :before等等
 
 权值 +1

6、通用选择器、子选择器、相邻选择器、同胞选择器

 用法是 * > + ~
 
 权值 +0

3、权值的规则

 1、同一元素上，权值高者生效；
 
 2、相同选后者，就是如果两个样式的最终权值是相同的，那就是后写的样式生效；
 
 3、伪元素选择器相加起来，不可能大于类选择器；
 
 4、！important（无限大）>行内样式（权重1000）>id选择器（权重100）>类选择器（10）
 =伪类选择器（10）=属性选择器（10）>元素选择器（1）>通用选择器（0）>继承的样式>浏览器默认的样式。
 

三、小结

只有清楚了样式的权值计算，对于我们前端来说，写起页面来才会得心应手。

不过 !important还是建议少用。

而全局样式不是说不能用，而是建议统一规划，按定好的标准或者类别集中起来管理，这样开发起来才会条条不紊，思路清晰。

PS: 我是地霊殿__三無，希望对你有所帮助。