例如:
我有一个页面，代码是:
<!DOCTYPE html>
<html>
<head>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap"><a href="#" class="link">link</a></div>
</body>
</html>
我有一个通用的 JavaScript 组件，它将加载一个包含以下代码的 CSS 文件:
.wrap .link { color: blue; }
然后链接将从红色变为蓝色。
使用 iframe 可以解决这个问题，但会导致另一个问题，例如在页面的一部分显示两个滚动条或灯箱覆盖。
我不能更改 CSS，但我可以编写一个 JS 加载程序，所以你有解决这个问题的想法吗？
最佳答案
如果选择器匹配，则将应用一个规则，直到被级联下方的规则(设置相同的属性)覆盖为止。
您可以更改选择器以阻止它们匹配您不希望它们匹配的元素，或者您可以覆盖该部分中的所有规则。
因此，您必须调整标记和样式。您可以在每个选择器之前加上 #wrapper。例如，如果规则说 a{color:red}，请将其替换为 #wrapper a {color:red;}。
HTML5 允许 scoped stylesheets , 但目前只有 Firefox 支持它。然而，您可以尝试 jQuery 解决方案:https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin .
希望对您有所帮助。
关于javascript - 如何通过 JavaScript 创建 CSS 作用域以防止 CSS 作用于页面的另一部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42523650/