选择器的 Vuetify 组件是：
<v-select
:items="items"
label="Standard"
></v-select>
但是当选择器处于活动状态时，会出现许多嵌套组件（在检查时），例如下拉菜单本身，menu__content。我该如何设计它？对于“可见”Vuetify 组件 v-select，我可以手动添加一个类，并直接在 css 中设置其样式。但是，我无法对隐藏组件执行此操作。
我尝试使用检查给定的类“.menu__content”进行样式设置，但似乎不起作用：https://jsfiddle.net/agreyfield91/tgpfhn8m/936/ https://jsfiddle.net/agreyfield91/tgpfhn8m/936/.
我如何在 css 中手动设置这些组件的样式？我缺少关于 vuetify 的一些基本知识吗？
看来它不起作用
如果您再次检查它，您会发现它确实“有效”，但它似乎被某些东西覆盖：
.menu__内容{
顶部：200px;
}
我缺少关于 vuetify 的一些基本知识吗？
显然不是在这种情况下，你只是失踪了CSS 特异性 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity.
如果您检查该元素，您会注意到它有一些内联样式，这些内联样式可能是由某些 JavaScript 添加的，您无法立即更改。
来自上面的链接：
内联样式添加到元素（例如 style="font-weight:bold"）始终覆盖外部样式表中的任何样式，因此可以是
被认为具有最高的特异性。
解决方案
Afaik 在外部样式表中覆盖内联样式的唯一方法是使用!important，但这似乎不是最佳实践：
.menu__content {
top: 200px !important;
}
所以也许你可以做的另一件事是：
- 看看 vuetify 配置中是否有一个与您的 css 属性有关的变量可以更改（这可能适用于同一类型的所有组件）
- 查看 vuetify API 中是否有一个组件属性，您可以使用它来实现样式更改（如果可用，这可能是最好的解决方案）
- 使用您自己的脚本手动更改内联样式属性
- 改变另一个属性的风格，这将产生相同的期望结果
Note:
如果您使用 CSS 解决方案，并且样式似乎未应用，查看有关深度选择器的更多信息 https://stackoverflow.com/a/50985784/1981247.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
