将外部 css 的作用域限制为一个特定的元素？

我正在创建一个移动模拟器，在 Web 浏览器中模拟 iPhone (以及以后的其他设备)的外观和功能，使用100% 的 javascript、 HTML5和 CSS，模拟器只有客户端代码就能完全运行。

当我试图完成这个任务时，尽可能少地修改原始应用程序项目本身，让它们在模拟器中运行，我将 <script>和 <link>标签注入到页面的头部，然后将 html 加载到 <div>屏幕中。

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

我的问题是: 有没有办法限制外部 .css文件的“作用域”，只应用于 <div>屏幕内的对象？如果我不把它注入到页面的 <head>中，而是注入到 <div>屏幕的 <style>元素中，会有什么不同吗？

74713 次浏览
小开
最佳答案

UPDATE 此功能的支持已经被删除。请寻找其他选项

原文:

您可能需要查看作用域样式; 请参见 http://css-tricks.com/saving-the-day-with-scoped-css/。

基本思想是

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

但是，在浏览器支持方面，您正处于前沿。

一种替代方法是使用 iframe。

小开

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

div#foo{
//All your css
}

并将其转换为 less到 css，它将预先准备正确的选择器。请注意，您需要手动处理诸如@media 查询之类的事情。

小开

在写这篇文章的时候，Chrome 团队不赞成使用 <style scoped>。 因此，我尝试了一些方法并发布了 https://github.com/thgreasi/jquery.scopeLinkTags。 注意: 只有在无法控制导入的 CSS 文件时才需要使用这种方法。如果您可以使用 SASS/LESS/anything 来预处理您的 CSS，那么您应该更喜欢这种方法。

小开

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

我发现一个粗糙的脚本可以做到这一点:

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

小开

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

.parent{
// copy paste here
}

例子

  1. 找到一个预处理器，例如 https://beautifytools.com/scss-compiler.php对我来说工作得非常好(我与给定的链接没有联系)
  2. 如果您使用的是从 URL 添加 URL 使用加载 URL 按钮。
  3. 将 css 代码包装在父代码下，然后点击编译，然后缩小。
小开

我有一个类似的问题，并发现阴影 DOM 可以很容易地解决它。

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

来源


提交答案