问题没有HTML5的范围样式表

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

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

问候

8471

2018-06-03 14:56

起源

Chrome也支持范围样式 - gustavohenke

@gustavohenke默认情况下，人们可以认为它不适用于Chrome。 - Rob W

Rob W是对的，在Chrome上你需要启用实验模式。我正在寻找的是一个可以与IE8 +和Firefox 17 +一起使用的替代方案...如果它意味着使用一些css框架或其他技巧，那很好，只是想看看是否有其他方式...... - Martin

@Martin根据你对当前答案的回复，我建议你看看减。该嵌套规则功能是一个很有吸引力的解决方案。由于LESS只是CSS的超集，因此学习/使用它将非常容易。 - Rob W

答案:

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

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

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

等等

如果做不到的话，还有一个基于jQuery的范围polyfill 这应该会给你一个更独立于浏览器的方式来使用scoped CSS。这不是我曾经合作过的东西，所以没有任何经验可以提供，但从我花了很多时间它看起来非常有希望！

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

2018-06-03 15:04

好的，尝试过这种方法并且可行，将其添加到您的回复中。但是，这意味着我需要重命名我已经拥有的所有css文件中的样式，HTML替换更容易，因为它可以继承...有没有办法让te继承的样式向后兼容未触摸的html文件？ - Martin

嗨，马丁，它确实取决于您的网站如何设置。您不应该编辑CSS的大块。您通常会有一组“基本”CSS样式 - 这将适用于整个站点，然后使用我上面建议的声明作为覆盖，使样式更具体针对某些位置/情况。否则，还有一个polyfill可用，虽然我没有做任何事情，所以没有经验。我会更新我的答案。 - johnkavanagh

哇，基于jQuery的polyfill看起来就像我们需要的......会尝试一下，看看它是否有效。毕竟，新页面只会使用新的样式，我们最终想要摆脱旧样式，只需要以低成本保持分离的东西...... - Martin

很高兴听到你回答了你的问题。如果您确实需要任何进一步的帮助，请随时在Stack Overflow上进行搜索，如果没有，请打开一个新问题！如果您当前的问题已得到解答，请务必记住（绿色检查相关答案）。这将确保将来搜索类似解决方案的任何人都能够尽可能轻松地找到答案。 - johnkavanagh

哇，5年后，这仍然是让这个工作的唯一方法。伤心但真实...... - iGanja

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

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

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

2018-06-03 17:43

不再。几乎每个浏览器都放弃了对它的支持。 - iGanja

问题 没有HTML5的范围样式表

答案:

热门问题

问题没有HTML5的范围样式表