CSS选择器嵌套 [英] CSS Selector Nesting

问题描述

是否可以将选择器嵌套在选择器中？我有很多样式如下：

  #header h1 {
 ... 
} 
 #header img {
 ... 
} 
 #header表格{
 ... 
} 
  

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

  #header {
 h1 {
 ... 
} 
 img {
 ... 
} 
形式{
 ... 
} 
} 
  

为了提高可读性。

解决方案

不是吗？但是，如果您使用 SASS 或

根据您的需要，您应该研究其中一种。

。它们绝对值得，因为它们不仅可以显着简化嵌套选择器的工作，而且还可以引入变量，mixin，循环和其他方便的东西。

CSS预处理器的介绍和比较

Is it possible to nest selectors within selectors? I have a lot of styles that are looking like this:

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

and I want to condense them so that they would look something like this:

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

in order to improve readability. Is this possible in just plain old CSS?

解决方案

No it is not. However, if you use Preprocessors like SASS or LESS (to name only the most popular ones) it is.

Depending on what you need, you should look into one of those. They are definitely worth it, since they can ease your work significantly not only with nesting selectors but also introducing variables, mixins, loops and other handy stuff.

Introduction to and Comparison of CSS-Preprocessors

这篇关于CSS选择器嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！