Bootstrap-Vue -下拉按钮打开时的颜色

Question

下面的代码得到了我需要的按钮颜色和悬停。但是，当打开菜单并将光标从按钮上移开时，按钮的颜色将恢复为默认的灰色。当菜单打开时，如何自定义按钮?

当前有效的代码:

<style scoped>
/deep/ .dropdown > button {
color:#001E61;
background:#ffffff;
border-color:#001E61;
font-weight:bold;
}
/deep/ .dropdown > button:hover {
color:#E81F76;
background:#ffffff;
border-color:#E81F76;
font-weight:bold;
}
</style>

代码我试图自定义按钮的颜色时，菜单打开:

<style scoped>
/deep/ .dropdown > button:hover,
.dropdown > button:active,
.dropdown > button:focus    {
color:#E81F76;
background:#ffffff;
border-color:#E81F76;
font-weight:bold;
}
</scoped>

Answer 1

当下拉菜单展开时，.dropdowndiv应用了一个.show类，您可以使用它来样式按钮:

/deep/ .dropdown.show > button {
background: red;
}

如果你的项目是当前的，建议使用>>>而不是/deep/，这是不赞成的。