如何不修改Bootstrap源码覆盖其<hr>标签默认样式？

嘿，这个问题我太熟了！要覆盖Bootstrap默认的<hr>样式又不想碰它的源码，核心就是玩明白CSS的优先级规则——让你的自定义样式权重压过Bootstrap的就行。给你两种实用方案：

方法1：使用自定义类（最推荐，维护性最强） #

给你的<hr>标签加一个专属类名，比如：

<hr class="custom-divider">

然后在你的自定义CSS里写对应的样式——类选择器的优先级比Bootstrap里的标签选择器（hr）更高，所以会自动覆盖默认样式：

.custom-divider {
  border-top: 4px solid #FFF0F2;
  /* 这里帮你修正了原代码的小问题：别写`border: 4px`，它会直接重置所有border属性，把你之前设置的border-top给冲掉 */
  /* 如果需要调整整体视觉尺寸，可按需加height或padding，但hr的分隔线效果一般靠border-top控制就够了 */
}

方法2：使用!important（迫不得已时再用） #

如果不想给hr加类，也可以给样式属性加上!important强制覆盖Bootstrap的规则：

hr {
  border-top: 4px solid #FFF0F2 !important;
}

⚠️ 友情提醒：尽量别滥用!important，它会打破正常的CSS优先级逻辑，后续修改样式时很容易踩坑，只有当你找不到更优的选择器方案时再考虑用它。

关键前提：加载顺序要对 #

最后别忘了，你的自定义CSS文件一定要在Bootstrap的CSS文件之后引入，这样即使优先级相同，后加载的样式也会覆盖先加载的。比如HTML里要这么写：

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="你的自定义样式文件.css">

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