新手上路，请多包涵

我正在创建一个移动模拟器，该模拟器使用 100% javascript、HTML5 和 CSS 在 Web 浏览器中模拟 iPhone（以及后来的其他设备）的外观和功能，并且模拟器功能齐全，仅需客户端代码。

在尝试对要托管在模拟器中的原始应用程序项目本身进行尽可能少的修改来完成此任务时，我将 <script> 和 <link> 标签注入到页面，然后将 html 加载到 <div> 屏幕。

问题是当我加载一个新的 css 文件时，它（显然）覆盖了我用来设置页面样式的文件，因此某些元素受到影响（例如背景颜色改变）。

我的问题是：有什么方法可以限制外部 .css 文件的“范围”，使其仅适用于 <div> 屏幕内的对象？如果不是我将它注入页面的 <head> ，我将它注入 <style> 元素在 <div> 屏幕中，这会有什么不同吗？

原文由 SnareChops 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 447

2 个回答

得票最新

✓ 已被采纳

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

原帖：

基本思想是

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

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

一种替代方法是使用 iframe。

原文由 user663031 发布，翻译遵循 CC BY-SA 3.0 许可协议

只需将所有 css 代码包装在父元素的选择器中，假设它是一个 id 为 foo 你将执行以下操作：

 div#foo{
//All your css
}

并将其转换为 less 到 css ，它将添加到正确的选择器前面。请注意，您需要手动处理@media 查询等问题。

原文由 Juan Cortés 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

推荐问题

子站问答

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

相似问题

找不到问题？创建新问题

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