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

近期某项目中遇到一个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>

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

Django解决css样式失效问题最终方法
由于Django对css的支持不是很友好,有时候我们明明写了相应的css代码,但是引入css文件的时候前端没有效果,找了很多方法来解决都没能最终解决,终于在一个帖子上看到一个方法,对解决css样式 ...
解决css样式中first-child和last-child不生效的问题
前端项目需要使用v-for指令来渲染一个问题回复列表,列表的第一和最后需要显示不同的样式,便使用到了first-child和last-child这两个CSS属性,在编码后发现 last-child 和 ...
解决crlf 和 lf不同带来的冲突问题
crlf 和 lf 是文本换行的不同方式: crlf: "\r\n", windows系统的换行方式 lf: "\n", Linux系统的换行方式他们之间的不 ...
腾讯云cdn配置https后，解决css样式错乱问题
项目说明博客使用wordpress5.0编写的,之前被黑客Ddos攻击,索要比特币,真尼玛恶心,后面加了cdn,修复了下,但是在启用cdn以后https最开始是无法访问,因为我本以为在网站后台配置了 ...
用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
CSS样式定义方法大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 < ...
CSS样式表的规划与组织
如果你的工作过程中遇到以下问题,那么请你阅读此文章. 1:样式表文件里面的代码混乱,随着项目的进展,样式表里面的先有代码不敢做任何改变,因为连自己也不知道改了以后会给现有项目造成什么影响.更不敢删除. ...
第4章编辑css样式,第4章使用CSS样式.ppt
第4章使用CSS样式 4.1 学习任务:认识CSS样式表 4.2 学习任务:CSS规则的定义和创建 4.3 学习任务:在网页文档中使用CSS样式 4.4 上机实训--用CSS美化网页 4.1 学习任 ...
网页制作 css样式,网页设计与制作-CSS样式.ppt
网页设计与制作-CSS样式第四章CSS样式 4．1 CSS样式的定义和使用 4.1.1什么是CSS CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展 ...
（1）一些css样式—链接、列表、表格、轮廓、字体
一.链接: 1.css连接到的四种状态 a:link 普通的.未被访问的连接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方,就是准备点击时候的链接 a:a ...

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

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

最新文章

热门文章