如何让JS和CSS中点击效果优先级高于Hover（悬停）效果

点击按钮时会切换“selecionado”类来改变边框颜色，但鼠标悬停状态下点击按钮，边框会保持悬停样式，直到移开鼠标。需要实现点击后“selecionado”类的样式立即生效，优先级高于悬停效果。

问题核心是CSS选择器优先级冲突：button:hover和.selecionado的优先级相同，当元素同时处于hover和选中状态时，会优先执行后定义的样式。要让选中样式始终覆盖hover效果，有两种简单实现方式：

方式一：提升选中类的优先级 #

给.selecionado选择器加上元素限定，让它的优先级与button:hover持平，同时把它放在hover规则的后面，确保覆盖生效：

button:hover {
    border: 3px solid rgb(129, 129, 129);
    background: red;
}

button.selecionado {
    border: 3px solid rgb(18, 101, 255);
    /* 如果需要同时覆盖hover的背景色，可添加此行 */
    /* background: 你的选中状态背景色; */
}

方式二：定义选中状态下的hover样式 #

专门为已选中的按钮设置hover时的样式，强制继承选中状态的样式：

button:hover {
    border: 3px solid rgb(129, 129, 129);
    background: red;
}

.selecionado {
    border: 3px solid rgb(18, 101, 255);
}

.selecionado:hover {
    border: inherit;
    background: inherit;
    /* 也可以直接复制.selecionado的样式 */
    /* border: 3px solid rgb(18, 101, 255); */
}

额外优化：简化JS代码 #

三个按钮的点击逻辑完全重复，可用循环简化代码避免冗余：

// 选中所有目标按钮
const buttons = document.querySelectorAll("#IdProntoSocorro, #IdEnfermaria, #IdAmbulatorio");

// 批量绑定点击事件
buttons.forEach(btn => {
    btn.addEventListener("click", () => {
        btn.classList.toggle("selecionado");
    });
});

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