css - 取消设置 CSS 属性“继承”

Question

我正在使用一个框架（vuetify），它默认插入以下 css 规则：

[type="button"] {
  color: inherit;
}

问题是它总是最后插入，我无法控制。因此，如果我使用<button type="button" class="button">Test</button>带有 style的 html，.button { color: red; }则不会使用 css 规则，因为它会被其他规则覆盖。这意味着对于所有按钮类，我要么必须使用另一个选择器，要么必须button.button使用!important. 有没有另一种方法来全局禁用该属性color: inherit，以便我仍然可以使用一个类.button而不使用更具限制性的选择器？

标签： cssvuetify.js

Answer 1

您可以通过不戴上type="button"按钮来解决它，它具有“默认”的（按钮）行为。

.button {
  color: deepskyblue;
}

.container {
  color: deeppink;
}

[type="button"] {
  color: inherit;
}

<div class="container">
  <button class="button" type="button">What color will I have?</button>

  <button class="button">What color will I have?</button>
</div>