bootstrap - 为什么加上max-width:768px不管用呢?
本文介绍了bootstrap - 为什么加上max-width:768px不管用呢?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我在样式表里面写的这句话 加上这句话后当屏幕小于768时 那个div1的宽度百分比为什么还是50%?我哪里写的不对了?
<style type="text/css">
@media (max-width:768px){
#div1{width: 100%;}
}
</style>
<div id="div1" class="container" style="background-image: url(bg2.jpg);margin-top: 100px;width: 50%">
</div>
解决方案
优先级问题
优先级顺序
下列是一份优先级逐级增加的选择器列表:
通用选择器(*)
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
!important 规则例外
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
这篇关于bootstrap - 为什么加上max-width:768px不管用呢?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文