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