天天看点

bootstrap样式无法覆盖问题解决办法

今天博主遇到一问题,bootstrap的css文件里有这样一句话:

*{

  box-sizing:border-box

}

意思是说为所有的元素应用该样式,我有个div的元素块不想应用它的这个样式,然后我就自己写样式覆盖,

结果发现无论是内联还是内部都无法覆盖bootstrap定义的这个样式

后来查到有一句话说 * 不但通配所有元素,也包括继承关系。。。。

可能问题就出现在虽然我显示覆盖div块父元素的样式,但是其子并没有被覆盖

那我这样试试吧,

.myclass *{

box-sizing:content-box

}

<div class="myclass">

          <div></div>

          ............

</div>

结果还真的好用了,bootstrap坑好多啊。总结:用星匹配元素要慎用

另补充 

box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。

content-box,border和padding不计算入width之内

padding-box,padding计算入width内

border-box,border和padding计算入width之内