Sass优先级:悬停和类

Question

我正在编写一个在页面中多次使用的选项卡列表的样式表，它具有未选中选项卡、悬停在上面的选项卡和选中的选项卡的样式。问题是，当鼠标悬停在选定的项目上时，悬停样式优先于选定的样式。这是我的样式表:

@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;
    }
  }
}

当我不使用mixins和复制粘贴三种风格的每个标签栏项目我使用它，它的工作原理，但我怎么能做到这一点与mixins，通过扩展，或通过其他一些方法我不知道?

Answer 1

我看不出你的代码有什么问题——它目前呈现为:

.tabbar-item:hover {
  background: #440772;
  background: rgba(68, 7, 114, 0.875);
  color: white;
}
.tabbar-item.active {
  background: #390c91;
  background: rgba(57, 12, 145, 0.875);
  color: white;
}

只要悬停规则在活动规则之上，就应该应用活动规则