如何将 CSS 状态 (:focus/active/hover) 的样式重置为未声明的样式？

问题描述

我为我的 vue.js 应用程序使用 Buefy (Bulma) 包，但我遇到了一个带有指定样式（:focus 或 :focus-within）的错误。单击按钮后，其状态仍处于活动状态，因此按钮的设计不可读。

这是单击后按钮的外观，然后我单击页面上的其他任何位置：

我已设法手动覆盖它，但由于多种原因，此解决方案不是最佳的。这就是我现在手动覆盖指定样式的方式：

.button.is-primary:focus,a.navbar-item:focus,a.navbar-item:focus-within {
    background-color: #7957d5;
    border-color: transparent;
    color: #fff;
}

.button:focus:not(:active),.button.is-primary:focus:not(:active) {
  -webkit-Box-shadow: unset;
  Box-shadow: unset;
}

有没有办法禁用所有声明的样式而只在 CSS 或 SCSS 中使用未声明的/普通样式？

我希望能够拥有这样的东西（伪代码）：

.button.is-primary:focus {
  inherits: .button.is-primary
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

buefy sass vue.js