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

时间:2012-12-19 23:49:54

标签: css

我的意思是:例如我有一个网页,以及一个包含应用程序的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中有解决方案。提前谢谢!

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

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

以下是一些最受欢迎的:


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