如何全局禁用Vuetify默认的[type="button"] { color: inherit; }规则？

我之前也碰到过Vuetify这种样式优先级“霸屏”的问题，完全理解你不想写冗余选择器或者用!important的心情，这里有几个更优雅的解决方案：

1. 利用CSS层叠（CSS Cascade Layers） #

这是现代浏览器普遍支持的特性，能彻底解决样式层的优先级问题，不需要调整选择器结构。你可以把Vuetify的样式归到一个低层，自己的自定义样式放到高层，这样高层的样式会自动优先生效：

/* 在你的全局样式文件中，比如main.css */
@layer vuetify, custom;

/* 将Vuetify的样式引入到vuetify层 */
@import 'vuetify/styles' layer(vuetify);

/* 你的自定义样式放在custom层 */
@layer custom {
  .button {
    color: red;
  }
}

不管Vuetify的样式加载顺序如何，custom层的.button样式都会覆盖Vuetify的[type="button"]规则，完全不需要修改选择器。

2. 给自定义类提升特异性（无冗余绑定） #

如果不想用CSS层叠，你可以给自定义类加一个全局父元素选择器来提升特异性，既不用绑定到button标签，也不需要!important：

/* 假设你的页面根容器有.app类 */
.app .button {
  color: red;
}

这个选择器的特异性（类+类）比Vuetify的[type="button"]（属性选择器）更高，即使Vuetify的规则最后加载，你的自定义样式也能生效。

3. 反向排除自定义类的全局规则 #

你可以写一个全局规则，让Vuetify的color: inherit只对没有.button类的按钮生效：

[type="button"]:not(.button) {
  color: inherit;
}

不过需要确保这个规则在Vuetify的样式之后加载（如果你的构建工具允许调整顺序），这样它会覆盖Vuetify的原始规则，带.button类的按钮就不会被inherit属性影响了。

最推荐的是CSS层叠的方法，它既符合现代CSS规范，又不需要依赖加载顺序或冗余选择器，是最干净的解决方案。

内容的提问来源于stack exchange，提问作者CommanderData