为什么给按钮添加active_button类后，对应CSS样式未生效？

问题根因 #

样式未生效是CSS选择器优先级差异导致的：你给普通按钮设置样式用的是.cable-choose button（类选择器+标签选择器），优先级高于单一类选择器.active_button，哪怕元素已经成功添加了active_button类，它的边框样式也会被更高优先级的规则覆盖。

修复方案 #

1. 调整激活类的CSS规则优先级 #

将原CSS中.active_button的规则修改为如下内容，提高选择器优先级：

.cable-choose button.active_button {
  border: 2px solid black;
}

修改后该规则优先级高于原普通按钮样式，激活状态的边框效果可以正常展示。

2. 可选JS逻辑优化 #

为了避免DOM未加载完成时事件绑定失败，建议把点击事件绑定逻辑也放到$(document).ready()回调内，调整后的完整JS代码如下：

$(document).ready(function() {
  $('button').on('click', function() {
    $('button').removeClass('active_button');
    $(this).addClass('active_button');
  });

  //Home button active on page load
  $('#Home').addClass('active_button');
});

注：虽然给.active_button的border属性添加!important也可以临时解决问题，但会破坏全局样式优先级体系，后续维护容易出现样式冲突，不推荐使用。

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