css里class和id的优先级常用的已经都非常清楚
但有些时候还是因为一些小细节掉到坑里去
比如今天遇到的一个background-size的问题
以前我都是如下写：
background:url() contain;
但今天一朋友问我，所有的背景都需要contain，能不能，全局统一的定义，免得都要写
我脱口而出的不行，但是啪啪打脸，其实是可以的
优先定义是可以的
.test div[class^='icon'] {
background-size:contain;
}
div.icon-home{url()}
div.icon-about{url()}
注意：这里和编写的顺序没有关系 ！！！！！！！！！
div.icon-home{url()}
div.icon-about{url()}
.test div[class^='icon'] {
background-size:contain;
}
这样写也是绝对没有问题的哟！！！！！！！！！！！！！！
重点在这：继承的CSS 样式不如后来指定的CSS 样式
<div> <p><a></a></p></div>
p a > div a > a
到这里，我舒了一口气，暗自庆幸自己发现了新大陆，然后下一秒我又掉坑里了
.test div[class^='icon'] {
background-size:contain;
}
div.icon-home{url()}
#act div.icon-about{url()} ///////这里，id优先级高于class >0<,于是就进坑了
还好这个坑不深，常年不用的!important被宝宝想起来了
好啦，都心领神会了吧，简单粗暴
.test div[class^='icon'] {
background-size:contain !important; //除了行内，不论你怎么写，宝宝优先级最高
}
div.icon-home{url()}
#act div.icon-about{url()}
注意：!important可以被后面的!important覆盖
参考资料：http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html
