[英]Dynamically create nested CSS
I want to create a kind of 'scope' in CSS, so that all the CSS in a particular style tag does only effect a specific html node. 我想在CSS中创建一种“作用域”,以便特定样式标签中的所有CSS只会影响特定的html节点。
Simpler: I want something like this: 更简单:我想要这样的东西:
<style id="style1">
.foo { color: red; }
.bar { color: green; }
</style>
<style id="style2">
.dor { color: blue; }
</style>
dynamically turn into something like this: 动态地变成这样的东西:
<style id="style1">
#scope1 .foo { color: red; }
#scope1 .bar { color: green; }
</style>
<style id="style2">
.dor { color: blue; }
</style>
With PHP or JavaScript (preferably using jQuery) 使用PHP或JavaScript(最好使用jQuery)
Is there a simple way of doing this? 有一个简单的方法吗?
I don't know of anything that would do that specifically, but I would suggest looking into sass/scss . 我不知道有什么方法可以做到这一点,但是我建议您研究sass / scss 。 It provides a similar way of nesting css (and much more) 它提供了类似的嵌套CSS的方式(还有更多)
eg. 例如。
#style1 {
.foo {
color: red;
}
.bar {
color: green;
}
}
#style2 {
.dor { color: blue; }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.