如何实现按钮:focus状态仅点击同类按钮时取消，不同类可共存？

纯HTML+CSS即可实现你的需求，核心利用同name属性单选框的原生互斥特性，无需编写JavaScript逻辑： #

完整代码 #

CSS部分 #

/* 隐藏原生单选框元素 */
input[type="radio"] {
  display: none;
}

/* 按钮通用基础样式 */
.button {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

/* a组按钮样式 */
.a {
  background-color: white;
}
input[name="group-a"]:checked + .a {
  background-color: green;
}

/* b组按钮样式 */
.b {
  background-color: yellow;
}
input[name="group-b"]:checked + .b {
  background-color: blue;
}

HTML部分 #

<!-- a组按钮，共用name="group-a"，组内单选互斥 -->
<input type="radio" name="group-a" id="btn1">
<label class="button a" for="btn1">1</label>

<input type="radio" name="group-a" id="btn2">
<label class="button a" for="btn2">2</label>

<!-- b组按钮，共用name="group-b"，组内单选互斥 -->
<input type="radio" name="group-b" id="btn3">
<label class="button b" for="btn3">3</label>

<input type="radio" name="group-b" id="btn4">
<label class="button b" for="btn4">4</label>

效果说明 #

完全符合你的交互要求：

• 点击按钮1后按钮1变为绿色，再点击按钮3，按钮1保持绿色、按钮3变为蓝色
• 点击按钮2后，同组的按钮1恢复白色，按钮2变为绿色，b组的选中状态不受影响

保留原生button标签的补充方案 #

如果必须使用原生<button>标签实现，原生focus的特性是点击页面其他元素就会自动失焦，纯CSS无法修改该原生行为，需要补充少量JS实现，原有CSS无需改动，仅新增如下JS代码即可：

document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', function() {
    // 清除同class所有按钮的聚焦状态
    document.querySelectorAll(`.${this.className}`).forEach(el => el.blur());
    // 给当前点击按钮重新聚焦
    this.focus();
  });
})

内容的提问来源于stack exchange，提问作者account2348284238