将外部CSS的范围限制为只有特定的元素？
我正在创build一个移动模拟器，使用100％的JavaScript，HTML5和CSS模拟iPhone（以及其他设备）的外观和function，使用100％的JavaScript，HTML5和CSS，模拟器function完全，只有客户端代码。
在尝试完成这个任务时，只需对原始应用程序项目进行必要的修改，然后将其注入到模拟器中，然后将<script>和<link>标记注入页面头部，然后将html加载到<div>屏幕。
问题是，当我加载一个新的CSS文件，它（显然）覆盖了我用来风格的页面，因此一些元素受到影响（如背景更改颜色）。
我的问题是：有什么办法来限制外部.css文件的“范围”，只适用于<div>屏幕内的对象？ 如果不是将它注入到页面的<head>中，而是将它注入到<div>屏幕的<style>元素中，它会起什么作用吗？
更新对此function的支持已经被删除。 请寻求其他的select
原帖：
你可能想看看范围化的样式; 请参阅http://css-tricks.com/saving-the-day-with-scoped-css/ 。
基本的想法是
<div> <style scoped> @import "scoped.css"; </style> </div>
但是，在浏览器支持方面，您处于这个新的边缘。 请参阅http://caniuse.com/style-scoped 。
另一种select是使用iframe。
只需将所有的css代码包装在父元素的select器中，说它是一个ID为foo的div，你可以这样做：
div#foo{ //All your css }
并使用像http://less2css.org/这样的工具将其转换为;css ，它会预先select正确的select器。 请注意，您需要手动处理诸如@media查询等内容。
在写这篇文章时，Chrome团队不推荐使用<style scoped> 。 因此，我尝试了一些方法并发布了https://github.com/thgreasi/jquery.scopeLinkTags 。 注意：如果您无法控制导入的CSS文件，则只能使用此方法。 如果你可以使用SASS / LESS /任何东西来预处理你的CSS，你应该更喜欢。
一个简单的方法是在css文件中的所有select器之前添加pre-class。
我发现一个咕噜脚本可以做到这一点：
一个简单的方法是：
- 将文件保存为
.less - 在较less的编辑器（如
Crunch）中打开它 - 第一行添加：
.my_scope {，最后一行添加}（.my_scope {整个CSS的东西放在这个范围内） - 保存并紧缩自动创build的less = .css
- 把类
my_scope放在你的div或你的标签上
