设置Vuetify选择器的样式

设置Vuetify选择器的样式

似乎不起作用

如果再次检查它，您将看到它“起作用”，但是它似乎被某些东西覆盖：
.menu__content {
top：200px;
}

关于Vuetify我是否缺少一些基本知识？

显然不是在这种情况下，您只是缺少CSS Specificity。

如果您检查该元素，您会发现该元素具有一些内联样式，可能是您无法更改的某些Javascript添加的。
从上面的链接：

*添加到元素的 *内嵌样式 （例如，style =“ font-weight：bold”） 始终会覆盖外部样式表中的任何样式
，因此可以认为具有最高的特异性。

解决方案

Afaik在外部样式表中覆盖内联样式的唯一方法是使用

!important

，但是这似乎不是最佳实践：

.menu__content {    top: 200px !important;}

所以也许您可以做的另一件事是：

• 看看vuetify config中是否有关于您的CSS属性可以更改的变量（这可能适用于相同类型的所有组件）
• 查看vuetify API中是否有一个组件属性，您可以使用该属性来实现样式更改（如果可能，这可能是最好的解决方案）
• 使用自己的脚本手动更改内联样式属性
• 更改将产生相同预期结果的另一个属性的样式

。