javascript - 动态创建嵌套 CSS

Question

我想在 CSS 中创建一种“范围”，以便特定样式标签中的所有 CSS 只影响特定的 html 节点。

更简单:我想要这样的东西:

<style id="style1">
  .foo { color: red; }
  .bar { color: green; }
</style>
<style id="style2">
  .dor { color: blue; }
</style>

动态变成这样:

<style id="style1">
  #scope1 .foo { color: red; }
  #scope1 .bar { color: green; }
</style>
<style id="style2">
  .dor { color: blue; }
</style>

使用 PHP 或 JavaScript(最好使用 jQuery)

有没有一种简单的方法可以做到这一点？

Answer 1

我不知道有什么可以专门做到这一点，但我建议查看 sass/scss .它提供了一种类似的嵌套 css 的方式(以及更多)

例如。

#style1 {
  .foo {
    color: red;
  }
  .bar {
    color: green;
  }
}
#style2 {
  .dor { color: blue; }
}