Question

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

是否有任何其他解决方案可以提供广泛兼容的结果？

此致

Answer 1

此时，范围内的样式不受支持，如果您期望任何类型的跨浏览器覆盖，这将导致您出现问题。

您真正实现目标的唯一方法是为每个“部分”使用唯一的类名（或ID），然后使用继承来对CSS进行排序。因此，如果您想要定位页面的一个特定部分，请为其父级提供一个类名（例如：class="testone"），然后确保要应用于该部分的任何样式都附加了该类名：

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

等

如果失败了，还有一个jQuery-based scope polyfill，它可以为您提供更加独立于浏览器的使用范围CSS的方式。这不是我曾经合作过的东西，所以没有任何经验可以提供，但从我花了很多时间看它看起来很有希望！

请记住，就像任何基于JavaScript的解决方案一样，任何在没有启用JavaScript的情况下加载页面的人都不会获得那些额外的细节，因此确保页面仍然以可接受的方式运行是很重要的当JS被禁用时。

Answer 2

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

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

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

没有HTML5的范围样式表

2 个答案: