12

我需要一种可以将 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 重构... :)

是否有任何其他解决方案可以呈现这种广泛兼容的结果？

问候

4

2 回答 2

8

Scoped 样式在这一点上没有得到很好的支持，如果您期望任何类型的跨浏览器覆盖，将会给您带来问题。

真正实现您所追求的唯一方法是为每个“部分”使用唯一的类名（或 ID），然后使用继承来对 CSS 进行排序命名空间。所以如果你想定位页面的一个特定部分，给它的父母一个类名（例如：）class="testone"，然后确保你想应用于该部分的任何样式都附加了该类名：

.testone .title{...}
.testone h1{...}
.testone a{...

等等

如果做不到这一点，还有一个基于 jQuery 的范围 polyfill，它应该为您提供一种更独立于浏览器的方式来使用范围 CSS。这不是我使用过的东西，所以没有任何经验可以提供，但从我使用它的片刻来看，它看起来很有希望！

请记住，与任何像这样的基于 JavaScript 的解决方案一样，任何在未启用 JavaScript 的情况下加载页面的人都不会获得这些额外的细节，因此确保页面仍然以可接受的方式运行非常重要，即使 JS 是禁用。

于 2013-06-03T15:04:37.737 回答
2

HTML5 草稿中的属性名称是scoped，而不是scope。

对它的支持正在慢慢实现，但几乎没有理由使用属性或作用域样式表。大多数浏览器会<style scoped>简单地<style>将其应用于整个文档。

因此，最好分析您要解决的问题并找到不同的方法。在许多情况下，使用合适的上下文选择器是微不足道的。将id属性分配给元素并使用 id 选择器作为选择器的第一个组件。

于 2013-06-03T17:43:56.083 回答