有沒有辦法只爲特定的包裝器定義CSS？

Question

我的意思是：例如我有一個網頁和一個包含應用程序的div。頁面有它自己的樣式，但我希望應用程序有它自己的樣式（例如twitter引導樣式）。那麼是否有一種方法可以僅爲具體包裝器定義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/
• 薩斯http://sass-lang.com/
• 筆http://learnboost.github.com/stylus/

---

還有scoped風格，但瀏覽支持目前非常貧窮。