CSS 选择器嵌套

Question

是否可以在选择器中嵌套选择器？我有很多样式看起来像这样：

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

我想压缩它们，使它们看起来像这样：

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

以提高可读性。这在普通的旧 CSS 中可能吗？

Answer 1

不，不是。但是，如果您使用像 SASS 或 LESS 这样的预处理器（仅举出最受欢迎的预处理器），它是。

根据您的需要，您应该研究其中之一。它们绝对是值得的，因为它们不仅可以通过嵌套选择器显着简化您的工作，还可以引入变量、mixin、循环和其他方便的东西。

CSS预处理器的介绍和比较

Answer 2

不是在原版 CSS 中，但有像 LESS 这样的编译到 CSS 语言，它允许你使用嵌套选择器。

我选择的库是 Sass，它现在已集成到 Rails 资产管道中。

Answer 3

不，这在普通 CSS 中是不可能的。你需要像 Sass 或更少这样的东西。

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 hack，但我不确定这些技巧的有效性和标准一致性如何。