gpt4 book ai didi

css - 没有 HTML5 的范围样式表

转载 作者:技术小花猫 更新时间:2023-10-29 12:41:24 24 4
gpt4 key购买 nike

我需要一种方法,可以将 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com