Bootstrap后引入自定义样式仍无法覆盖特定h3标签样式求助

这种样式覆盖失效的情况我碰到过好多次，哪怕用了!important也踩过坑，咱们一步步排查：

1. 先搞清楚优先级到底差在哪 #

打开浏览器开发者工具（F12），选中那个不听话的h3标签，查看计算样式面板：

• 找到你自定义的h3样式，看是不是被划掉了？如果是，旁边会显示被哪个Bootstrap样式覆盖了
• 重点看Bootstrap的选择器，比如它可能用了.container h3或者.card-body h3这种嵌套选择器，优先级比你单纯的h3高太多——哪怕你加了!important，如果对方的选择器更具体，也可能压过你（除非你用同样甚至更具体的选择器搭配!important）

举个实际场景：
如果你的HTML结构是：

<div class="article-content">
  <h3>这是无法覆盖的标题</h3>
</div>

Bootstrap的对应样式可能是：

.article-content h3 {
  font-size: 1.75rem;
  color: #212529;
}

那你单纯写h3 { color: #ff0000 !important; }可能不够，得用和它一样具体的选择器：

.article-content h3 {
  color: #ff0000;
}

这样不用!important也能直接覆盖——因为选择器优先级相同，而你的样式加载在Bootstrap之后，顺序上占优。

2. 检查!important的正确用法 #

如果确实需要用!important，得确保你的选择器至少和Bootstrap的选择器一样具体，比如：

.article-content h3 {
  color: #ff0000 !important;
}

而不是单纯的h3 { ... !important; }——因为Bootstrap的嵌套选择器优先级更高，哪怕你加了!important，也敌不过更具体的选择器搭配普通样式。

3. 确认样式加载的真正顺序 #

你说Bootstrap是第一个引入的，之后加载自定义样式，这个逻辑是对的，但要排查：有没有其他后续加载的CSS文件（比如第三方插件、页面内的<style>标签）又覆盖了你的自定义样式？

在开发者工具的样式面板里，看每个样式的来源文件，确保你的自定义样式是最后加载的那一批。

4. 排除拼写和语法错误 #

偶尔也会犯低级错误：比如自定义CSS里的h3选择器拼错了？或者属性名写错了（比如把color写成colour）？仔细检查一下自定义CSS的语法，确保没有笔误。

总结一下：优先用更具体的选择器来覆盖，尽量少用!important，这是最稳妥的维护方式。如果还是不行，把开发者工具里的Bootstrap样式截图和你的完整HTML/CSS代码贴出来，我可以帮你再细化分析～

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