单击Bootstrap按钮时，它将更改为主状态

Question

这个问题可能看似重复，但其他解决方案对我不起作用。

我的问题是每当我点击自定义的Bootstrap按钮时，它就会变为btn-primary风格。

自定义按钮：

点击了按钮：

当我搜索解决方案时，我只能使用btn:active:focus找到它们。 我试过这个，但它并没有为我做到这一点。

我的CSS：

.btn-custom01 {
    background-color:#3b3b3b;
    border-color:#ff0066;
}
.btn-custom01:active:focus{background-color:#333333; border-color:#ff0066; color:#ff0066; }
.btn-custom01:hover{background-color:#3b3b3b; border-color:#f2f2f2;}

我该如何解决这个问题？我希望有人可以帮助我。

Answer 1

看起来您正在链接您的元素状态，从链中删除活动并且焦点开始工作。如果你想要两者，请将它们区分开来。

＆＃13;

＆＃13;

.btn-custom01 {
  background-color: #3b3b3b;
  border-color: #ff0066;
}

.btn-custom01:focus {
  background-color: #333333;
  border-color: #ff0066;
  color: #ff0066;
}

.btn-custom01:hover {
  background-color: #3b3b3b;
  border-color: #f2f2f2;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<button class='btn btn-custom01'>Hello World</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用.btn-custom01:focus

.btn-custom01 {
  background-color: #3b3b3b;
  border-color: #ff0066;
}

.btn-custom01:active:focus {
  background-color: #333333;
  border-color: #ff0066;
  color: #ff0066;
}

.btn-custom01:hover,
.btn-custom01:focus {
  background-color: #3b3b3b;
  border-color: #f2f2f2;
}

Answer 3

使用已访问的选择器https://www.w3schools.com/cssref/sel_visited.asp  btn:visited {}