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

【问题标题】：Limit scope of external css to only a specific element?将外部 css 的范围限制为仅特定元素？
【发布时间】：2013-07-16 04:12:04
【问题描述】：

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

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

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

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

【问题讨论】：

您不能将 CSS 范围限定为特定元素/类，然后根据需要更改元素/类吗？
我可以，但是我必须要求模拟器的所有用户都遵循特定的 css 布局，而我正在尝试探索在不修改典型 css 样式的情况下完成相同操作的选项跨度>

标签： html css

【解决方案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。

【讨论】：

有一个用于作用域 CSS 的 jQuery polyfill：github.com/thingsinjars/jQuery-Scoped-CSS-plugin
不幸的是，polyfill 没有正确实现作用域样式，因为它没有将它们应用到 style 元素的父元素上。见github.com/thingsinjars/jQuery-Scoped-CSS-plugin/issues/6。
对于未来的读者，范围样式已从 CSS 规范中删除。 不要使用这个！

【解决方案2】：

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

div#foo{
//All your css
}

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

【讨论】：

你会要求模拟器的所有用户都做同样的事情，如问题的 cmets 中所述。

【解决方案3】：

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

【讨论】：

有人知道他们为什么弃用它吗？看起来是个好主意，不是吗？
“由于代码复杂度高。”，见here。

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

.parent{
    // copy paste here
}

示例

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

【讨论】：

【解决方案6】：

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

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

Source

【讨论】：