我正在创建一个移动模拟器，该模拟器使用100％javascript，HTML5和CSS在Web浏览器中模拟iPhone（以及以后的其他设备）的外观和功能，并且该模拟器仅使用客户端代码即可完全正常运行。
在尝试通过对原始应用程序项目本身进行少量修改而完成此任务的同时，将其托管在模拟器中，我将<script>and<link>标记注入页面的顶部，然后将html加载到<div>屏幕中。
问题是，当我加载一个新的CSS文件时，它（显然）会覆盖我用来设置页面样式的文件，因此某些元素会受到影响（例如背景会更改颜色）。
我的问题是：有什么方法可以限制外部.css文件的“作用域”，使其仅适用于<div>屏幕内的对象？如果不是将其注入到<head>页面的中，而是将其注入到屏幕上的某个<style>元素中，会有所不同<div>吗？
Answers:
更新已删除对此功能的支持。请寻求其他选择
原始帖子：
您可能要看一下作用域样式。请参阅http://css-tricks.com/saving-the-day-with-scoped-css/。
基本思想是
<div>
<style scoped>
@import "scoped.css";
</style>
</div>
但是，就浏览器支持而言，您处于最前沿。参见http://caniuse.com/style-scoped。
一种替代方法是使用iframe。
style元素的父项。见github.com/thingsinjars/jQuery-Scoped-CSS-plugin/issues/6。
只需将所有css代码包装在父元素的选择器中，说这是一个id为id的div，foo请执行以下操作：
div#foo{
//All your css
}
并将其转换为less对css，它会在前面加上正确的选择。请注意，您需要手动处理@media查询等内容。
在撰写本文时，<style scoped>Chrome小组已弃用。结果，我尝试了一些方法并发布了https://github.com/thgreasi/jquery.scopeLinkTags。注意：只有在无法控制导入的CSS文件的情况下，才应使用此方法。如果您可以使用SASS / LESS /任何方法对CSS进行预处理，则应首选。