css优先级及其对应的权重
1.选择器的优先级
!important>内联选择器(style)>id选择器>类选择器 | 属性选择器 | 伪类选择器 > 元素选择器>通配符(*)
2.选择器的权重(通过权重计算可以避免许多问题)
!important | 10000 |
内联选择器 | 1000 |
id选择器 | 100 |
类选择器 | 10 |
元素选择器 | 1 |
eg:body #sum{width:100px;} 结果:100+1=101。
ps:!important在某些时候会失效(当然能不用!imortant就不要用)
eg:box{
width:100px!important;
min-width:200px;
}
这个时候!important会失效,最终的宽度会是200px。
想做一定有方法,不想做一定有理由。