优先级小记

2017-03-22 本文已影响0人 cooqi

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覆盖