导入的CSS样式文件与自定义CSS样式文件冲突

您所在的位置：网站首页 › css样式强制覆盖其他元素怎么办 › 导入的CSS样式文件与自定义CSS样式文件冲突

导入的CSS样式文件与自定义CSS样式文件冲突

2024-07-01 13:06| 来源: 网络整理| 查看: 265

css样式渲染方式是，后来居上。加入的css样式不影响原页面的css，最后加在页面的顶端。避免样式干扰。

在使用bootstrap时，有时候并不希望在整个网站上使用 Bootstrap，您只需要使用Bootstrap CSS的一部分。如果只是将 Bootstrap CSS 直接添加到 head 中，就有可能会与其他的 CSS 产生冲突，从而产生混乱的样式。

bootstrap样式跟自定的css样式冲突时怎么解决？

选择重写css样式让其覆盖原有的样式，如依然没有得到解决，试试以下几个方法：

1. 细化选择符

假如全局是这样来定义一个元素的样式的：.abc {background:#000}，同时某个元素的子元素也应用了一个.abc的样式，比如下面这样的html代码结构

那么在细化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 文件

替换为

然后将HTML包装在带有类bootstrap-iso的div中，如下所示：

【本文地址】

导入的CSS样式文件与自定义CSS样式文件冲突

导入的CSS样式文件与自定义CSS样式文件冲突

今日新闻

推荐新闻