CSS選擇器嵌套

Question

是否可以在選擇器內嵌套選擇器？我有很多都在尋找這樣的風格：

#header h1{ 
    ... 
} 
#header img{ 
    ... 
} 
#header form{ 
    ... 
} 

，我想他們凝結，使他們看起來像這樣：

#header{ 
    h1{ 
    ... 
    } 
    img{ 
    ... 
    } 
    form{ 
    ... 
    } 
} 

爲了提高可讀性。這只是簡單的舊CSS可能嗎？

Answer 1

不，它不是。但是，如果您使用像SASS或LESS這樣的預處理器（僅列出最受歡迎的預處理器），那就是。

根據你的需要，你應該看看其中之一。它們絕對是值得的，因爲它們可以顯着地減輕你的工作量，不僅可以使用嵌套選擇器，而且還可以引入變量，混合，循環和其他方便的東西。

Introduction to and Comparison of CSS-Preprocessors

Answer 2

不是在香草CSS中，但有編譯成CSS語言，如LESS，它們允許您使用嵌套選擇器。

我選擇的圖書館是Sass，它現在被集成到Rails資產管道中。

Answer 3

不，這不可能在純CSS。你需要像Sass或Less。

Answer 4

不，這是不可能與普通的舊CSS。

但你可以用LESS或Sass。這兩個編譯成CSS。

Sass生成CSS，可以按照您的要求示例縮進。

#header{} 
    #header h1{ 
    ... 
    } 
    #header img{ 
    ... 
    } 
    #header form{ 
    ... 
    } 

Answer 5

您可能會發現類似的東西

@-moz-document url-prefix() { 
    .myDefinition { 
    } 
} 

但是。這些由Firefox解析，可用於提供僅限Firefox的CSS黑客攻擊，但我不確定這些攻擊是如何有效且符合標準。