将外部css的范围仅限于特定元素？ [英] Limit scope of external css to only a specific element?
问题描述
我创建了一个移动模拟器，使用100％的javascript，HTML5和CSS，模拟器完全功能与只有客户端代码在Web浏览器中嘲笑iPhone（和其他设备）的外观和功能。
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
在尝试完成此任务时，只需对原始应用项目本身进行必要的修改即可在模拟器中进行托管，我注入了 < script> 和< link> 标记放入页面头部，然后将HTML加载到 ; div> 屏幕。
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
问题是，当我加载一个新的css文件，使用风格的页面，因此一些元素受到影响（背景变化的颜色）。
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
我的问题是：有任何方法来限制范围外部 .css 文件仅应用于< div> 屏幕中的对象？如果不是我把它注入到页面的< head> ，我会把它注入一个< style> / code>
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
推荐答案
UPDATE 已停用对此功能的支持。请寻找其他选项
UPDATE Support for this feature has been dropped. Please seek other options
原始帖子：
范围样式;请参阅 http://css-tricks.com/saving-the-day -with-scoped-css / 。
基本思想是
<div>
<style scoped>
@import "scoped.css";
</style>
</div>
但是，在浏览器支持方面，请参见 http://caniuse.com/style-scoped 。
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
一种替代方法是使用iframe。
One alternative would be to use an iframe.
这篇关于将外部css的范围仅限于特定元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
