将外部css的范围限制为仅限于特定元素？

Question

我正在创建一个移动模拟器,它使用100%的javascript,HTML5和CSS模拟iPhone(以及其他设备以后)的外观和功能,模拟器完全可以使用客户端代码.

在尝试完成此任务时,只需对原始应用程序项目本身进行必要的修改即可在模拟器中托管,我将<script>和<link>标签注入页面的头部,然后将html加载到<div>屏幕中.

问题是,当我加载一个新的css文件时,它(显然)会覆盖我用来设置页面样式的文件,因此一些元素会受到影响(除了背景改变颜色).

我的问题是:有没有办法限制外部.css文件的"范围" 只适用于<div>屏幕内的对象？如果不是将它注入<head>页面中,我会将它注入屏幕中的<style>元素,这会有<div>什么不同吗？

Answer 1

更新已删除对此功能的支持.请寻求其他选择

原帖:

基本的想法是

<div>
    <style scoped>
        @import "scoped.css";
    </style>
</div>

但是,就浏览器支持而言,您处于最前沿.请参阅http://caniuse.com/style-scoped.

一种替代方案是使用iframe.

对于未来的读者,范围样式已从CSS规范中删除.*不要使用它!* (12认同)
有一个用于作用域CSS的jQuery polyfill:https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin (2认同)
不幸的是，polyfill 没有正确实现作用域样式，因为它没有按照应有的方式将它们应用于“style”元素的父元素。请参阅 https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin/issues/6。 (2认同)

Answer 2

只需将所有css代码包装在父元素的选择器中,说它是一个id为id的div,foo你可以执行以下操作:

div#foo{
//All your css
}

并将其转换为less对css,它会在前面加上正确的选择.请注意,您需要手动处理@media查询等操作.