72

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

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

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

我的问题是：有没有办法将外部.css文件的“范围”限制为仅适用于<div>屏幕内的对象？如果不是我将它注入到<head>页面中，而是将它注入到屏幕中的一个<style>元素中，会有什么不同吗？<div>

4

6 回答 6

42

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

原帖：

您可能想查看作用域样式；请参阅http://css-tricks.com/saving-the-day-with-scoped-css/。

基本思想是

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

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

一种替代方法是使用 iframe。

于 2013-07-16T04:27:04.177 回答
30

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

div#foo{
//All your css
}

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

于 2015-06-29T12:41:08.970 回答
3

在撰写本文时，<style scoped>Chrome 团队已弃用它。结果我尝试了一些方法并发布了https://github.com/thgreasi/jquery.scopeLinkTags。注意：只有在无法控制导入的 CSS 文件的情况下，才应该使用这种方法。如果您可以使用 SASS/LESS/anything 来预处理您的 CSS，那么您应该更喜欢这样。

于 2016-06-15T05:06:01.297 回答
1

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

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

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

于 2016-07-25T06:38:08.267 回答
1

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

.parent{
    // copy paste here
}

例子

  1. 找到一个预处理器，例如https://beautifytools.com/scss-compiler.php对我来说效果很好（我与给定的链接没有从属关系）
  2. 如果您从 URL 使用，请使用加载 URL 按钮添加 URL。
  3. 将css代码包装在父级下并点击编译然后缩小。
于 2021-05-28T20:11:51.033 回答
0

我遇到了类似的问题，发现 Shadow DOM 可以轻松解决。

let output = d.querySelector('#output')
let shadow = output.attachShadow({
  mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTML content and style injected

来源

于 2022-01-09T15:05:48.300 回答