按钮focus效果冲突：多分类按钮选中状态互不干扰如何实现

:focus伪类的特性是全局唯一，页面同一时间仅能有一个元素处于聚焦状态，天生不适合用于多组独立的单选选中状态标识，这是你当前问题的核心诱因。

原生无JS方案（推荐，语义化最佳） #

用隐藏的原生单选框<input type="radio"> + label模拟按钮的方案，天生支持同组单选、跨组互不干扰，语义化友好，表单提交也不需要额外处理值。

代码示例 #

HTML结构

同组单选框的name属性值保持一致，不同组的name属性值不同，即可天然实现同组互斥、跨组独立的效果。

<!-- 咖啡品类分组 -->
<h1>咖啡品类</h1>
<div class="option-group">
  <input type="radio" name="coffee_type" id="type1" value="arabica">
  <label for="type1" class="option-btn">阿拉比卡</label>

  <input type="radio" name="coffee_type" id="type2" value="robusta">
  <label for="type2" class="option-btn">罗布斯塔</label>

  <input type="radio" name="coffee_type" id="type3" value="blend">
  <label for="type3" class="option-btn">拼配</label>
</div>

<!-- 购买分量分组 -->
<h1>购买分量</h1>
<div class="option-group">
  <input type="radio" name="weight" id="weight1" value="250g">
  <label for="weight1" class="option-btn">250g</label>

  <input type="radio" name="weight" id="weight2" value="500g">
  <label for="weight2" class="option-btn">500g</label>

  <input type="radio" name="weight" id="weight3" value="1kg">
  <label for="weight3" class="option-btn">1kg</label>
</div>

CSS样式

/* 隐藏原生单选框 */
.option-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 按钮默认样式 */
.option-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 8px;
}

/* 选中状态样式 用:checked伪类触发 */
.option-group input[type="radio"]:checked + .option-btn {
  background-color: #8b5a2b;
  color: #fff;
  border-color: #8b5a2b;
}

/* 可选：保留focus状态做无障碍支持，给键盘导航用户提示 */
.option-group input[type="radio"]:focus + .option-btn {
  outline: 2px solid #d2b48c;
  outline-offset: 2px;
}

JS辅助实现方案（适用于必须用button标签的场景） #

如果业务要求必须用<button>标签实现，就通过JS给选中按钮添加自定义类（比如.active）来控制选中样式，不要依赖:focus。

代码示例 #

HTML结构

<h1>咖啡品类</h1>
<div class="option-group" data-group="coffee_type">
  <button class="option-btn">阿拉比卡</button>
  <button class="option-btn">罗布斯塔</button>
  <button class="option-btn">拼配</button>
</div>

<h1>购买分量</h1>
<div class="option-group" data-group="weight">
  <button class="option-btn">250g</button>
  <button class="option-btn">500g</button>
  <button class="option-btn">1kg</button>
</div>

CSS样式

.option-btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 8px;
}

.option-btn.active {
  background-color: #8b5a2b;
  color: #fff;
  border-color: #8b5a2b;
}

JS代码

document.querySelectorAll('.option-group').forEach(group => {
  const buttons = group.querySelectorAll('.option-btn');
  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      // 仅清除当前组内的选中状态，不影响其他分组
      buttons.forEach(b => b.classList.remove('active'));
      // 给当前点击按钮添加选中类
      btn.classList.add('active');
    });
  });
});

• 永远不要用:focus伪类做持久化选中状态标识，它的设计目的是标识当前用户交互的焦点元素，会随用户点击其他元素、切换页面等操作丢失
• 单选类的选项优先用原生radio实现，不需要额外写JS，稳定性和兼容性都更好

内容的提问来源于stack exchange，提问作者Angira Dasgupta Arinda