有没有办法只为特定的包装器定义CSS？

Question

我的意思是：例如我有一个网页，以及一个包含应用程序的div。 Page有自己的样式，但我希望该应用程序有自己的样式（例如twitter bootstrap样式）。那么有没有一种方法只为具体的包装器定义CSS，这样应用程序的这些样式就不会影响页面本身的样式。

当然我们总是可以编写#wrapper .btn { // style }类，但同样的twitter bootstrap有100KB的样式，所以管理所有样式会有点复杂。如果有类似的结构，那将是完美的：

#wrapper {
     .btn { //style }
     .btn-group { // style }
}

相当于

#wrapper .btn { // style }
#wrapper .btn-group { // style }

我希望CSS中有解决方案。提前谢谢！

Answer 1

Twitter Botstrap使用较少的css http://lesscss.org/，它可以让你完全按照你提到的那样做：

#wrapper {
     .btn { //style }
     .btn-group { // style }
}

它是这样写的，然后编译成传统的CSS。根据您使用的是哪种框架/语言（.net，php），有特定于它们的插件。我们使用dot.less，以及bootstrap，它工作得很好。

Answer 2

不使用纯CSS。您需要使用CSS预处理器。其中有一些，他们都支持这种嵌套方式。

以下是一些最受欢迎的：

• 减去http://lesscss.org/
• Sass http://sass-lang.com/
• 手写笔http://learnboost.github.com/stylus/

---

还有scoped个样式，但目前浏览支持非常差。