如何更改悬停背景和单击 Bootstrap Vue 下拉项的背景？答案

【问题标题】：How do I change the hover background and the background on click on a Bootstrap Vue dropdown item?如何更改悬停背景和单击 Bootstrap Vue 下拉项的背景？
【发布时间】：2020-03-16 19:48:57
【问题描述】：

悬停时的默认背景颜色是浅灰色。我在导航栏中有以下下拉菜单。

<b-nav-item-dropdown text="TOOLS" right>
    <b-dropdown-item href="#" class="dropdown-mine">1</b-dropdown-item>
    <b-dropdown-item href="#" class="dropdown-mine">2</b-dropdown-item>
    <b-dropdown-item href="#" class="dropdown-mine">3</b-dropdown-item>
    <b-dropdown-item href="#" class="dropdown-mine">4</b-dropdown-item>
</b-nav-item-dropdown>

我尝试使用以下 CSS 更改悬停背景

.dropdown-item:hover{
    background-color:red;
 }

编辑：更改下拉项目的下拉项目有效。不过

当我尝试更改点击背景时，它不起作用：

.dropdown-mine:focus{
    background-color:green;
 }

我尝试添加 !important 但没有结果。

编辑：我也试过 .nav-item-dropdown

【问题讨论】：

除非我弄错了，否则您正在尝试将您的 CSS 样式应用于名为 dropdown-item 的类。你的类应该是dropdown-mine，或者如果你想把它应用到所有的下拉项目中，它只是不带点的标签名称。
@pensum 似乎是正确的，将其更改为.dropdown-mine:hover{ background-color:red; }
b-dropdown-item 组件添加了dropdown-item 类。 dropdown-mine 只是扩展了类列表。
我忘记了我的问题中的一些内容。我编辑了它
您是否检查过 DevTools 中的样式以查看您的规则是否正在应用以及它们是否可能被引导样式覆盖？这会缩小一些范围。

标签： javascript html vue.js

【解决方案1】：

也许你应该试试这个：

.dropdown-item {
  & ::v-deep .dropdown-mine {
    background-color: green;
  }
}

我不熟悉 Vue.js，但我在 Stackoverflow 上发现了一个类似的问题，给出了这个答案。您可以阅读有关::v-deep 选择器here 的更多信息。

【讨论】：