为什么不应用此 CSS 规则？

Question

我希望所有文本字体默认使用 Roboto，但也希望一种特定的 class 使用 Roboto Thin。到目前为止，这是我的代码：

mixins.less

* {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

快-payment.less

@import (reference) '../../content/less/mixins';
.bss-fast-payment {
  &__header {
    .useAlsSectorFont();
  }
}

Chrome 开发工具

Answer 1

* 选择器覆盖了 .bss-fast-payment__header class 选择器。您可以使用：

font-family: 'Roboto Thin', sans-serif !important;

强制覆盖。尽量避免经常这样做，并尽量避免使用 * 选择器。

Answer 2

将 !Important 与被子 class 覆盖的字体系列一起使用。

Answer 3

我想我终于知道怎么做了。我唯一改变的是 bss-fast-payment__header .

mixins.less

* {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

快-payment.less

@import (reference) '../../content/less/mixins';
.bss-fast-payment {
  &__header * {
    .useAlsSectorFont();
  }
}

结果