【译】CSS嵌套与特殊性这是Kilian Valkhof关于CSS嵌套的文章，目前还没有在浏览器中使用，但很快就会有。

这是Kilian Valkhof关于CSS嵌套的文章，目前还没有在浏览器中使用，但很快就会有。他指出了CSS嵌套与Sass或Less中的嵌套之间的一些区别。以下面的代码为例。

div {
  background: #fff;
  & p {
    color: red;
  }
  border: 1px solid;
}

当CSS嵌套落地时，最后一行border: 1px solid; ，不会像在Sass中那样被应用到div。这是因为在CSS嵌套中，你想应用于该div的任何样式都必须在任何嵌套样式被写入之前写入。我认为这很有意义，因为我倾向于在我工作的任何Sass代码库中执行这种风格（它只是更容易阅读），但我可以想象人们在第一次使用时对此感到困惑。

关于CSS嵌套的一个较小的，但由于某种原因，_超级令人兴奋的_事情是我们将能够嵌套媒体查询，正如Kilian所指出的，就像这样。

body {
  background: red;
  
  @media (min-width: 40rem) {
    & {
      background: blue;
    }
  }
}

这是非常令人兴奋的

直接链接到文章-Permalink

The postCSS Nesting, specificity, and youappeared first onCSS-Tricks.你可以通过成为MVP支持者来支持CSS-Tricks。