如何用JavaScript或CSS覆盖带!important的内联边框样式（不可加类/ID）

我经常碰到这类没法修改HTML结构，只能通过样式或脚本覆盖内联!important样式的场景，这里给你两种靠谱的解决方案：

方案一：纯CSS属性选择器覆盖 #

利用CSS属性选择器精准定位带有目标内联样式的div，再通过带!important的声明完成覆盖（因为原内联样式用了!important，我们必须用同样的方式才能突破优先级限制）：

div[style*="border: 1px solid #ccccc !important"] {
  border-width: 2px !important;
}

注意：属性选择器里的字符串要和目标div的内联样式尽可能匹配，比如空格、颜色值的写法都要对应，否则可能选不到元素。如果原样式的写法有细微差异（比如颜色是#ccc而非#ccccc），可以调整选择器里的匹配内容。

方案二：JavaScript/jQuery动态修改 #

既然你提到网站已经加载了jQuery，那可以用它快速定位元素并修改样式。需要注意的是，直接用常规.css()方法可能因为内联的!important失效，所以我们要针对性处理：

jQuery版本 #

$(document).ready(function() {
  // 精准定位带有指定内联border样式的div
  $('div[style*="border: 1px solid #ccccc !important"]').css('border-width', '2px !important');
});

如果你不确定原样式的完整字符串，也可以简化选择器为$('div[style*="border"]')，但这样可能会选中其他带border内联样式的div，建议尽可能精准匹配。

原生JavaScript版本（无需jQuery的备用方案） #

document.addEventListener('DOMContentLoaded', function() {
  const targetDivs = document.querySelectorAll('div[style*="border: 1px solid #ccccc !important"]');
  targetDivs.forEach(div => {
    // 直接通过API设置带!important优先级的样式
    div.style.setProperty('border-width', '2px', 'important');
  });
});

这两种方案都能帮你把目标div的边框改成2px，完全不需要添加额外的类或ID。

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