Question

如果两个条件中的任何一个都存在，我想给元素赋予不同的颜色。这是代码：

  .btn-link{
    color: $color-black;
    margin: 0;

  &:hover{
    color: $color-light-blue;
  }
  &:not(.collapsed){
    color: $color-light-blue;
  }
}

一切都很好，但是如果您可以将两个选择器结合使用，那就更好了

我已经尝试过：

 &:hover&:not(.collapsed){
        color: $color-light-blue;
      }

但是只有hover被识别

Answer 1

与CSS中的方法相同：

&:hover, &:not(.collapsed) {
    color: $color-light-blue;
}

仅当元素处于悬停状态或没有类collapsed时，才设置颜色。

Answer 2

您可以在两个组合选择器之间添加逗号，例如：mapsview/.project

完整示例：

HTML：

&:hover, &:not(.collapsed) {

CSS：

<span class="btn-link">one class</span>
<span class="btn-link collapsed">two class</span>

JSfiddle。

对不起，没有StackSnippet。我们仍然不能在这里处理SCSS！

Answer 3

您可以尝试通过简单的更改代码

/*SCSS*/
$color-light-blue : red;
.btn-link {
  &:hover:not(.collapsed) {
    color: $color-light-blue;
  }
}
/*compiled  CSS*/

.btn-link:hover:not(.collapsed) {
  color: red;
}

<span class="btn-link">one class</span>
<span class="btn-link collapsed">two class</span>

如何结合两个SCSS选择器？

3 个答案: