javascript - 样式 "scoped"<style scoped> 属性在 chrome 36+ 中不受支持。有什么替代品或替代品吗？

Question

我在 style 标签中使用 scoped 属性。chrome 浏览器不支持。使用 chrome 浏览器实现此功能的任何替代方法或替代方法。

Answer 1

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

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

等等

否则，还有一个基于 jQuery 的作用域 polyfill，它应该为您提供一种更独立于浏览器的方式来处理作用域 CSS。我没有使用过它，所以没有任何经验可以提供，但从我使用它的那几分钟来看，它看起来很有前途!

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

来源:Scoped Style Sheets without HTML5