解决CSS样式重复定义带来的冲突问题

最新推荐文章于 2022-11-15 19:05:28 发布

小鹰信息技术服务部

最新推荐文章于 2022-11-15 19:05:28 发布

阅读量2.8k

点赞数 1

分类专栏： web开发文章标签： CSS冲突样式覆盖第三方库 HTML样式前端开发

本文链接：https://blog.csdn.net/zhouyingge1104/article/details/124075160

版权

web开发专栏收录该内容

108 篇文章 1 订阅

订阅专栏

近期某项目中遇到一个css样式的问题，本来系统里有一套css样式定义，工作正常。

后来引入了一个设计师自己搞的图表，js+css。嵌入系统之后发现样式不正常，检查原因发现第三方图表自带的css中有一些内容和系统现有内容冲突了，例如：

body部分

/*现有 app.css*/
body {
    height: 100%;
}

/*第三方 index.css*/
body {
  background-image: url(img/bg1.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  color: #fff;
}

nav部分

/*现有 bootstrap.css*/
nav {
  ...
}

/*第三方 index.css*/
nav {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 105px;
  background-image: url(img/head_bg.png);
}

两个css文件定义了相同的元素，所以会冲突。

经过一番研究，找到了解决的办法：

把第三方css文件中的定义拿出来，直接贴在第三方图表的html文件中，也就是限制它为局部有效：

/*xxx.html*/

<head>
    <style>

    body {
      background-image: url(img/bg1.jpg);
      background-repeat: no-repeat;
      background-size: 100%;
      color: #fff;
    }

    nav {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2
    }

    </style>
</head>

小鹰信息技术服务部

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
解决CSS样式重复定义带来的冲突问题

近期某项目中遇到一个css样式的问题，本来系统里有一套css样式定义，工作正常。后来引入了一个设计师自己搞的图表，js+css。嵌入系统之后发现样式不正常，检查原因发现第三方图表自带的css中有一些内容和系统现有内容冲突了，例如：body部分/*现有 app.css*/body { height: 100%;}/*第三方 index.css*/body { background-image: url(img/bg1.jpg); background-repeat: n
复制链接

扫一扫