点击按钮后隐藏border-bottom的CSS实现问题求助

情况1：点击按住按钮时隐藏border-bottom #

如果仅需要鼠标按下按钮的瞬间隐藏底部边框，大概率是CSS优先级不足或伪类写法有误，试试以下方案：

• 确保伪类样式优先级不低于基础样式，必要时提升权重：

/* 基础按钮样式 */
.btn {
  border-bottom: 2px solid #000;
  padding: 8px 16px;
  background: #fff;
  border-top: none;
  border-left: none;
  border-right: none;
}

/* 点击按住时隐藏border-bottom */
.btn:active {
  border-bottom: none;
  /* 若优先级不够，可改用 .btn:active { border-bottom: none !important; } */
}

注意：:active仅在鼠标按下按钮时生效，松开后会立刻恢复原样式，若需要点击后永久隐藏，看下面的方案。

情况2：点击按钮后永久隐藏border-bottom #

CSS伪类无法实现持久状态的修改，必须借助JavaScript记录“已点击”状态：

1. 给按钮绑定点击事件，切换自定义样式类：

<button class="btn">点击隐藏底部边框</button>

.btn {
  border-bottom: 2px solid #000;
  padding: 8px 16px;
  background: #fff;
  border-top: none;
  border-left: none;
  border-right: none;
}

/* 自定义类：隐藏底部边框 */
.btn.hide-border-bottom {
  border-bottom: none;
}

const targetBtn = document.querySelector('.btn');
targetBtn.addEventListener('click', function() {
  // 若需要点击一次永久隐藏，用 this.classList.add('hide-border-bottom');
  this.classList.toggle('hide-border-bottom');
});

为什么你用的伪类无效？ #

• :visited：仅对<a>标签生效，且可修改的样式范围极小，按钮不属于链接元素，完全无效。
• :focus：仅在按钮处于聚焦状态时生效，点击后切换焦点（如点击页面其他区域），样式会立刻恢复。
• :active：仅在鼠标按下按钮的瞬间生效，松开鼠标后状态消失，无法实现持久隐藏。

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