我正在尝试用下面的代码设计按钮颜色,颜色会一直工作到我单击按钮,按钮显示默认颜色,如何指定按钮的颜色
.btn成功{
颜色:#ffffff;
背景色:#161617;
边框颜色:#494F57;
}
.btn成功:悬停,
btn:成功,
.btn成功:活动,
.btn-success.active,
.open.dropdown-toggle.btn-success{
颜色:#ffffff;
背景色:#1F2838;
边框颜色:#494F57;
}
.btn成功:活动,
.btn-success.active,
.open.dropdown-toggle.btn-success{
背景图像:无;
}
.btn-success.disabled,
.btn成功[已禁用],
字段集[已禁用]。btn成功,
.btn成功。禁用:悬停,
.btn成功[禁用]:悬停,
字段集[已禁用]。btn成功:悬停,
.btn成功。禁用:焦点,
.btn成功[禁用]:焦点,
字段集[已禁用]。btn成功:焦点,
.btn成功。禁用:活动,
.btn成功[禁用]:活动,
字段集[已禁用]。btn成功:活动,
.btn-success.disabled.active,
.btn成功[已禁用]。处于活动状态,
字段集[已禁用].btn-success.active{
背景色:#161617;
边框颜色:#494F57;
}
.btn成功。徽章{
颜色:#161617;
背景色:#ffffff;
}
:active选择器是单击所需的
.btn示例:活动{
//单击此处的样式
}
看起来您已经看到了上面的颜色,因此如果您仍然看到稍微不同的颜色,很可能是因为框阴影也应用于活动按钮状态。禁止这样做:
.btn示例:活动{
盒影:无;
}
编辑:
覆盖css的选择器实际上是btn success:active:focus。因此,您需要在css中添加以下内容:
btn成功:活动:焦点{
颜色:#ffffff;
背景色:#161617;
边框颜色:#494F57;
}
关于我下面的评论,您最好创建自己的类,例如btn custom,以便应用所需的样式。将其与现有的btn类相结合,您可以用更少的代码实现所需的结果,因为您不需要覆盖现有的选择器