我已经覆盖了悬停、事件和焦点状态，但是当我单击按钮并按住时，我得到了另一种我似乎无法覆盖的颜色(深蓝色)。是否有一些我不知道的额外按钮状态？
https://jsbin.com/kutavovora/edit?html,css,output
.btn-primary {
background: #f00;
&:hover, &:focus, &:active, &.active {
background: #0f0;
}
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a class="btn btn-primary btn-lg">Click and Hold</a>
</body>
</html>最佳答案
发生这种情况是因为您正在使用 Bootstrap，并且它定义了以下样式:
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
color: #FFF;
background-color: #204D74;
border-color: #122B40;
}
编辑:
如果您想覆盖这些样式，您只需要使用更具体的选择器(仅 .btn.btn-primary 而不是 .btn-primary)，例如:
.btn.btn-primary {
background: #f00;
&:hover, &:focus, &:active, &.active {
background: #0f0;
}
}
关于CSS 按钮状态怪异 - 按住单击状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31396051/