css - 嵌套没有按预期工作

Question

我想将 h1 嵌套在 title 类中，但出于某种原因它不想发生。

.title {
  display: flex;
  overflow: hidden;
  align-items: center;
  h1 {
    color: #717171;
    font-size: 500%;
  }
}

检查元素时，h1 没有上述任何属性。 当我改用下面的代码时，一切正常。

.title h1 {
  color: #717171;
  font-size: 500%;
}

这可能是什么原因？ 我正在使用带有 HTML 模板的 C9 云 IDE，据我所知，它有 SCSS 预处理器。

Answer 1

如果是 sass ，那么你的语法是错误的，sass 和 scss 的语法不同。

你在 sass 中的风格应该是这样的:

.title 
  display: flex
  overflow: hidden
  align-items: center
  h1 
    color: #717171
    font-size: 500%

在 scss 中就像你已经拥有的一样:

.title {
  display: flex;
  overflow: hidden;
  align-items: center;
  h1 {
    color: #717171;
    font-size: 500%;
  }
}

你总是可以在 sassmeister 检查你的 sass 语法错误，这个站点可以检查 sass 和 scss，你也可以选择你想测试的版本。