Css Sass优先级：悬停和类

我正在为页面中多次使用的选项卡列表编写一个样式表，其中有一个用于未选中选项卡、悬停选项卡和选中选项卡的样式。问题在于，将鼠标悬停在选定项上时，悬停样式的优先级高于选定样式。这是我的样式表：

@mixin bg-rgba($r, $g, $b, $a) {
  background: rgb($r, $g, $b);
  background: rgba($r, $g, $b, $a);
}

@mixin tab-inactive {
  background: none;
  color: rgb(68, 7, 114);
}

@mixin tab-hover {
  @include bg-rgba(68, 7, 114, 0.875);
  color: white;
}

@mixin tab-selected {
  @include bg-rgba(57, 12, 145, 0.875);
  color: white;
}

.tabbar {
  float: left;
  width: 200px;
  @include bg-rgba(255, 255, 255, 0.625);

  &-item {
    display: block;
    width: 100%;
    @include tab-inactive;

    &:hover {
      @include tab-hover;
    }

    // including &.active:hover doesn't work
    // using :active also isn't feasible
    &.active {
      @include tab-selected;
    }
  }
}

---

当我不使用mixin并在我使用的任何地方复制粘贴每个tabbar项的三种样式时，它都可以工作，但是我如何使用mixin，通过扩展，或者通过一些我不知道的其他方法来实现这一点呢？

我看不出您的代码有什么问题-它当前呈现为：

.tabbar项：悬停{ 背景：440772； 背景：rgba68,7114,0.875； 颜色：白色； } .tabbar-item.active{ 背景：390c91； 背景：rgba57,12145,0.875； 颜色：白色；

---

}在我看来，编译后的版本将活动规则置于悬停规则之上，即使它们在SCSS样式表中不是这样放置的。我尝试从样式扩展而不是混合，但将活动样式放在悬停样式之前。如果无法重现问题，则应将问题关闭为不可重现。你的代码运行良好不是答案，我同意你的看法。我知道nvm修复是我能给出的最糟糕的答案。让问题在我这边重现的是我使用的gulp watch脚本，在我修复它之后，它没有改变样式的顺序。我会记住在这种情况下运行gulpbuild只是为了确保这是一个问题。