Question

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

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

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

我的问题是：有没有办法限制外部.css文件的“范围”仅适用于<div>屏幕内的对象？如果不是将其注入页面的<head>，而是将其注入<style>屏幕中的<div>元素，会不会有任何区别？

Answer 1

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

原帖：

您可能希望查看范围样式;见http://css-tricks.com/saving-the-day-with-scoped-css/。

基本理念是

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

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

另一种方法是使用iframe。

Answer 2

简单地将所有css代码包装在父元素的选择器中，假设它是id为foo的div，您将执行以下操作：

div#foo{
//All your css
}

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

Answer 3

在撰写此文件时，Chrome小组已弃用repr('foo')。结果我尝试了一些方法并发布了https://github.com/thgreasi/jquery.scopeLinkTags。注意：您只需要使用此方法，以防您无法控制导入的CSS文件。如果您可以使用SASS / LESS / anything来预处理CSS，那么您应该更喜欢。

Answer 4

一种简单的方法是在css文件中的所有选择器之前添加pre-class。

我发现一个grunt脚本可以做到这一点：

https://github.com/ericf/grunt-css-selectors

Answer 5

如果在我的项目中不使用预处理器，我就是这样做的。搜索在线预处理器然后加载复制粘贴父类/id 下的css

.parent{
    // copy paste here
}

示例

找到一个预处理器，例如 https://beautifytools.com/scss-compiler.php 对我来说效果很好（我与给定的链接没有从属关系）
如果您从 URL 使用，请使用加载 URL 按钮添加 URL。
将 css 代码包裹在 parent 下并点击 compile 然后缩小。

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

5 个答案:

示例