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黑客攻击，但我不确定这些攻击是如何有效且符合标准。