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

一尘不染

html

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

在尝试通过对原始应用程序项目本身进行少量修改而完成此任务的同时，将其托管在模拟器中，我将<script>and
<link>标记注入页面的顶部，然后将html加载到<div>屏幕中。

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

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

阅读 348

2020-05-10

共1个答案

一尘不染

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

原始帖子：

基本思想是

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

但是，就浏览器支持而言，您处于最前沿。

一种替代方法是使用iframe。

2020-05-10