动态创建嵌套CSS

时间:2014-06-23 11:23:06

标签: javascript php css scope

我想创造一种范围'在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)

有一种简单的方法吗?

1 个答案:

答案 0 :(得分:1)

我不知道具体会做什么,但我建议调查sass/scss。它提供了一种嵌套css(以及更多)的类似方法

例如

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