動態創建嵌套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; }
}