CSS权重问题

最近在写官网项目，CSS的权重问题有点头疼，经常会写A元素的样式代码却影响了B的样式，有时候不回头再看一次网页还真发现不了。毕竟自己不可能记住全部的代码，那只能等到发现问题的时候，返回到原来的地方来处理了。

 上面的图片可以看到，footer的二维码被拉长了，原因是位于footer之前的代码，设定了img元素为高200px。

解决方法之一就是找到影响的源头，修改影响源头的代码，把代码改成它特有的情况（类特有或者id特有），这样就使得

footer的img跟qualification的img完全是两码事。

还有其他办法，比如说父子选择器  div>p 可以很容易确定关系，防止样式冲突  。

CSS权重判定（从左到右，左面的最大） 

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值 重要的	∞ 无穷大

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。