css - 覆盖 vue-vuetify 项目中的特定 css 属性

Question

我在我的 vuejs 项目中使用 vuetify，我的场景是这样的。

当我使用 v-card 时，我box-shadow: 3px 3px 30px #95959522;每次都想要，为此我在我的主 css 文件中将其覆盖为

.v-card {
    box-shadow: 3px 3px 30px #95959522 ;
}

但是如果我使用默认属性，例如v-card flator v-card raised，那么我肯定想要box-shadow附带指定属性的，但是目前所有的 v-card 都有box-shadow上面定义的，并且 flat 和 raise 的 prop 不再可用

标签： cssvue.jsvuetify.js

Answer 1

您可以使用:not关键字来排除flat，raised或任何其他情况。

.v-sheet.v-card:not(.v-card--raised):not(.v-card--flat) {
  box-shadow: 3px 3px 30px #959595;
}