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;
    }
  }
}

这太令人兴奋了！

直接链接 →