CSS - 选择器中有选择器是否有效

Question

我正在阅读有关Angular Material的文档，我遇到了这个：

.column-login {

    padding: 16px;

  div {
    background: #f5f5f5;
    border: 1px solid #000;
    padding: 50px;
    margin: 16px 0;
  }
}

在我看来有点奇怪。 我正在使用Visual Studio Code，它就像我期待的那样显示了一堆错误。

但代码完美无缺。 现在，有没有相当于那段css代码？

因为我试过了：

.column-login {

    padding: 16px;
}

.column-login > div {
    background: #f5f5f5;
    border: 1px solid #000;
    padding: 50px;
    margin: 16px 0;
  }

和

.column-login {

    padding: 16px;
}

.column-login div {
    background: #f5f5f5;
    border: 1px solid #000;
    padding: 50px;
    margin: 16px 0;
  }

但它破了。它只适用于我刚刚向您展示的第一段代码。 但我不知道，在我看来这很奇怪。 谁能解释一下为什么它是正确的？

Answer 1

嵌套规则不是有效的CSS，但它是CSS预处理器程序的一个特性，如Sass - 它在编译时生成有效的CSS。

您的示例从Sass生成以下内容：

.column-login {
  padding: 16px; 
  }
.column-login div {
  background: #f5f5f5;
  border: 1px solid #000;
  padding: 50px;
  margin: 16px 0; 
  }