SASS 中样式优先级未按预期工作

Question

我在单独的文件中定义了以下 scss 样式

.radio-button-focused {
  background-color: $PURPLE;
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

.radio-button {
  background-color: $BLACK;
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

它们都应用于一个按钮

但问题是单选按钮覆盖了单选按钮聚焦的颜色

我知道我可以使用 !important ，或者只使用其中之一而不是同时使用它们。但是，如果我被迫同时使用两者，是否可以采取其他措施来解决这个问题？

Answer 1

CSS 文件中的文字顺序很重要。如果两个规则具有相同的特异性，则应用最后一个。将 .radio-button 移到 .radio-button-focused 之前。您还可以使您的重点选择器更加具体。 .radio-button.radio-button-focused 例如。

这里以classB在A之前为例。

.b
{
  color: red;
}

.a
{
  color: blue;
}

<div class="a b">Hi</div>

这里是 A 在 B 之前。

.a
{
  color: blue;
}

.b
{
  color: red;
}

<div class="a b">Hi</div>

SASS 中样式优先级未按预期工作

style priority not working as expected in SASS

css

sass