我需要一种方法，可以将 CSS 文件的范围限定到页面的特定部分。理论上，这个例子应该做我需要的:
<html>
<head>
</head>
<body>
<div>
<style scope>
@import url("style1.css");
</style>
<div class="testText">Test with Style 1</div>
</div>
<div>
<style scope>
@import url("style2.css");
</style>
<div class="testText">Test with Style 2</div>
</div>
</body>
</html>
但是，我发现 scope 元素目前仅在某些浏览器中可用(主要是 Firefox 21+)。所以，我正在寻找一个懒惰的出路或问题。我需要将一些不同风格的内容整合到一个站点中。我们尝试加载两个 css 文件集，但是两个样式表中都出现了一些样式名称，因此在一个文件集中和相应的 html 内容中重命名样式名称将需要大量工作，特别是因为您不能仅使用 Eclipse 进行重构...:)
有没有其他解决方案可以呈现这样一个广泛兼容的结果？
问候
最佳答案
Scoped 样式在这一点上没有得到很好的支持，如果您期望任何类型的跨浏览器覆盖，将会给您带来问题。
真正实现目标的唯一方法是为每个“部分”使用唯一的类名(或 ID)，然后使用继承对 CSS 命名空间进行排序。因此，如果您想定位页面的一个特定部分，请为其 parent 提供一个类名(例如:class="testone")，然后确保附加了您想要应用于该部分的任何样式使用该类名:
.testone .title{...}
.testone h1{...}
.testone a{...
等等
否则，还有一个 jQuery-based scope polyfill这应该为您提供一种更独立于浏览器的方式来处理作用域 CSS。我没有使用过它，所以没有任何经验可以提供，但从我使用它的那几分钟来看，它看起来很有前途!
请记住，与任何基于 JavaScript 的解决方案一样，任何在未启用 JavaScript 的情况下加载您的页面的人都不会获得这些额外的细节，因此确保页面仍然以可接受的方式运行非常重要当 JS 被禁用时。
关于css - 没有 HTML5 的范围样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16899697/