CSS子选择器在Sass中不起作用答案

【问题标题】：CSS's child selector not working in SassCSS子选择器在Sass中不起作用
【发布时间】：2017-01-07 09:52:47
【问题描述】：

我想对元素的直接子<a> 标记应用样式。

在普通的 CSS 中，我会使用类似的东西：

.card > a {
 color: red;
}

但在 Sass 中，我无法让这个或以下任何组合发挥作用。

在我尝试过的 .scss 文件中：

.card > a {
 color: red;
}

.card & > a {
 color: red;
}

.card {
  > a {
     color: red;
    }
}

.card {
  & > a {
   color: red;
  }
}

但这些都不起作用。编译器中也没有显示错误。

有人知道这样做的正确方法吗？

【问题讨论】：

SASS: Direct Descendent rule?的可能重复
你试过& >div（>和div之间没有空格）吗？
由于您的第一个示例与 CSS 完全相同，因此它没有理由不起作用。一个可能的原因是你没有正确编译你的 SASS，或者编译的文件没有被正确地带入你的应用程序。你的第二个例子是无效的语法。第三个或第四个应该可以正常工作。 PS。为什么要尝试使用 SASS？

标签： css sass

【解决方案1】：

这行得通：因为 & 连接自 .card

.card {
  &>a {
    color: red;
  }
}

【讨论】：