CSS按钮状态怪异-保持点击状态？答案

【问题标题】：CSS button state weirdness - held click state?CSS按钮状态怪异-保持点击状态？
【发布时间】：2015-10-02 11:11:08
【问题描述】：

我已经涵盖了悬停、活动和焦点状态，但是当我单击按钮并按住时，我得到了另一种我似乎无法覆盖的颜色（深蓝色）。是否有一些我不知道的额外按钮状态？

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>

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是因为您使用的是 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;
  }
}

【讨论】：

好的.. 到底是什么意思？
查看我的编辑以在您的示例中覆盖 Bootstrap 样式；)

【解决方案2】：

您的问题是因为您使用的是引导程序，它在此处设置了 active 状态：

.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
  background-color: #286090;
  border-color: #204d74;
  color: #fff;
}

所以不要让你拥有这个：

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background: #0f0;
}

改成这样：

.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active {
  background-color: #0f0;
}

这是一个sn-p：

.btn-primary {
  background: #f00;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
  background-color: #0f0;
}

<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>

<body>
  <a class="btn btn-primary btn-lg">Click and Hold</a>
</body>

【讨论】：

那行不通。无论我使用background-color 还是background，都没有区别。