4

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

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

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

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

为了提高可读性。这在普通的旧 CSS 中是否可行？

4

5 回答 5

2

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

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

于 2012-06-18T13:49:47.983 回答
2

不它不是。但是，如果您使用SASS或LESS之类的预处理器（仅列出最流行的），它就是。

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

CSS-预处理器的介绍和比较

于 2012-06-18T13:50:18.017 回答
0

不，这在纯 CSS 中是不可能的。你需要类似Sass或Less的东西。

于 2012-06-18T13:50:31.637 回答
0

不，使用普通的旧 CSS 是不可能的。

但是你可以用LESS或Sass来做。这两个编译成CSS。

Sass 生成的 CSS 可以像您需要的示例一样缩进。

#header{}
   #header h1{
     ...
   }
   #header img{
     ...
   }
   #header form{
     ...
   }
于 2012-06-18T13:51:08.423 回答
0

你可能会发现类似的东西

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

然而。这些由 Firefox 解析，可用于提供仅限 Firefox 的 CSS hack，但我不确定它们的有效性和标准符合性。

于 2012-10-22T19:43:41.060 回答