我需要一种方法,我可以将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重构...... :)
是否有任何其他解决方案可以提供广泛兼容的结果？
问候
此时,范围样式不受支持,如果您期望任何类型的跨浏览器覆盖,则会导致问题.
你真正实现目标的唯一方法是为每个'section'使用一个唯一的类名(或ID),然后使用继承来对CSS进行排序.因此,如果您想要定位页面的一个特定部分,请为其父项指定一个类名(例如:) class="testone",然后确保要应用于该部分的任何样式都附加了该类名:
.testone .title{...}
.testone h1{...}
.testone a{...
等等
如果做不到这一点,还有一个基于jQuery的范围polyfill,它应该为您提供更加独立于浏览器的使用范围CSS的方式.这不是我曾经合作过的东西,所以没有任何经验可以提供,但从我花了很多时间看它看起来很有希望!
请记住,与任何基于JavaScript的解决方案一样,任何在没有启用JavaScript的情况下加载页面的人都不会获得那些额外的细节,因此确保页面仍然以可接受的方式运行是很重要的,即使JS是禁用.