使用jQuery的addClass方法时CSS的border属性不生效问题

问题原因及解决方法 #

可能原因1：CSS样式优先级被覆盖 #

你当前的选择器.filter-btn.active-filter-bg优先级为2个类选择器权重，若存在以下情况会导致border规则被覆盖：

• 存在#price-filter1开头的id选择器设置了border属性（id选择器权重远高于类选择器）
• 其他地方设置.filter-btn的border时加了!important规则
• 其他选择器优先级高于你的当前规则

解决方法：

• 打开浏览器开发者工具（F12），选中对应按钮元素，查看「样式」面板中你写的border规则是否被划掉，若被划掉可以看到是被哪条规则覆盖
• 提升当前规则优先级，比如调整选择器为#price-filter1.filter-btn.active-filter-bg，或者临时加!important验证是否是优先级问题：

.filter-btn.active-filter-bg {
  background-color: #ecb7c1;
  border: solid 1px transparent !important;
}

可能原因2：透明边框不可见 #

你当前设置的边框颜色为transparent（透明），如果按钮父容器的背景色和按钮背景色接近，透明边框会完全看不到，误以为没有生效。
解决方法：
将边框颜色改为实色即可看到效果，例如：

.filter-btn.active-filter-bg {
  background-color: #ecb7c1;
  border: solid 1px #d67d8f;
}

可选验证项 #

因为你的背景色已经生效，说明类名已经成功添加，若以上两个方法都无法解决，可以确认JS执行时机是否正确，将JS代码放在DOM加载完成的回调中：

$(document).ready(function() {
  $("#price-filter1").addClass('active-filter-bg')
})

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