以前我在写css的时候，常常发现没写错但为什么没反应？然后开始陷入debug迴圈，后来才发现是权重出了问题，我想这也是大家都经历过的痛吧！

在刚开始写CSS的时候，觉得要写得很精準，写到心坎里，
所以会有过于仔细的现象，导致css的权重问题，不好维护。
例如:

html样式

<div class="wrap"> <ul class="list">     <li><a href="#"><img src="img/example01">example01</a></li>     <li><a href="#"><img src="img/example02">example02</a></li>     <li><a href="#"><img src="img/example03">example03</a></li> </ul>    </div> 

CSS样式

.wrap .list ul li a img{weight: 300px;}

白话文:class name为wrap，下的class name为list，下的li,下的a，下的img
宽度为300px

其实只要这样写就可以了

.lsit a{  width: 300px;}

所谓的权重就是指 css 的优先权，例如:

但是这些权重是怎么计算的呢？

基本权重大小

inline style > ID > Class > Element > *

我们以分数做为权重的大小，给分越高权重越高

'*' 0分

很常用到的全站预设值，所以只要权重超过就可以覆盖过它的预设。

全站预设值*{    margin: 0;padding: 0;border: 0; }

Element 1分

Element 总共有哪些呢？下面列出部分常见的

html, body, div, span, h1, h2, h3, h4, h5, h6,p,ol, ul, li,a,img...

class 10分

class在 html 上面会写成 class="box" ，在 css内长这样 .box ，前方会有一个点'.'

.box{ height: 300px;}

id 100分

在 html 上面是这样写的 id="box" ，在 css 内长这样 #box，前方会带井字号。

#box{height: 300px;}

inline style attribute 1000分

所谓的 inline style attribute 就是写在 html 行内的 style

<div style="color:yellow">    CSS Specificity</div>

範例

ul li 都是 element 所以加起来是 2分body div ul li a span 总共 6 个 element 所以加起来是 6分body.list 一个 element 加上一个 class ，所以是 1+10=11分.myclass ul li  两个 element 加上一个 class ，所以是 10+1+1=12分

最后最后的王牌叫做 !important

!important 的权重非常高，可以盖过所有的权重

.box{    height: 300px;!important}

只有 !important 能超越 !important，所以没事不要乱用
这个意思是，当你在任何一段 css 里面下了 !important，如果想要覆盖原本的 css 又不直接改原本的档案时，后来写的 css 也必须加上 !important 才行。这样会使得 css 很杂乱，因此如果了解权重，基本上用到 !important 的机会非常少。

.box{    background-color: #000000;!important}.box{    background-color:#ffffff;!important}

结论

!important > inline style > ID > Class> Element > *

所以在写css时要注意权重，才不会发生写出来css正确，无法出现效果的情况。