- css样式渲染方式是,后来居上。
- 加入的css样式不影响原页面的css,最后加在页面的顶端。避免样式干扰。
在使用bootstrap时,有时候并不希望在整个网站上使用 Bootstrap,您只需要使用Bootstrap CSS的一部分。
如果只是将 Bootstrap CSS 直接添加到 head 中,就有可能会与其他的 CSS 产生冲突,从而产生混乱的样式。
bootstrap样式跟自定的css样式冲突时怎么解决?
选择重写css样式让其覆盖原有的样式,如依然没有得到解决,试试以下几个方法:
1. 细化选择符
假如全局是这样来定义一个元素的样式的:.abc {background:#000},同时某个元素的子元素也应用了一个.abc的样式,比如下面这样的html代码结构
<div class="container">
<div class="abc"></div>
</div>
那么在细化css里面,只需要在.abc前面加多一个父元素的选择符就行了:
.container .abc {background:#fff}
这样.container .abc的优先级就大于了.abc,这个css里面的background设置也就不会被全局CSS覆盖了
2. 参照css 选择器 //不太推荐
- 第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
- 第二优先级:在html中给元素标签加style,即内联样式。该方法会造成css难以管理,所以不推荐使用。
- 第三优先级:由一个或多个id选择器来定义。例如,#id{margin:0;}会覆盖.classname{margin:3pxl}
- 第四优先级:由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
- 第五优先级:由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px;}
- 第六优先级:通配选择器,如*{marigin:6px;}
在css中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于一般选择器的规则。如果两个规则的特殊性相同,那么后定义的规则优先。
使用 LESS 为所有 Bootstrap CSS 添加一个类名称:
-
LESS是一个 CSS 处理器,允许您在编译到CSS之前更改变量。这允许您更改一个变量(例如基本字体大小),LESS 将自动调整所有依赖于它的样式(例如行高,标题等)。
-
以下展示如何使用LESS自定义bootstrap CSS,然后使用类bootstrap-iso为所有Bootstrap样式添加前缀。
处理步骤:
- 将导入 head 标签中的 bootstrap css 文件
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
替换为
<link rel="stylesheet" href="https://formden.com/static/assets/demos/bootstrap-iso/bootstrap-iso/bootstrap-iso.css" />
- 然后将HTML包装在带有类bootstrap-iso的div中,如下所示:
<div class="bootstrap-iso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>