使用Bootstrap时，不借助!important如何标准覆盖reboot.css样式？

嘿，这个场景我太熟悉了！不用!important完全能搞定，核心就是利用CSS优先级规则和样式加载顺序来调整，给你几个标准方案：

1. 确保自定义样式在Bootstrap之后加载 #

这是最基础也最容易忽略的点！如果你的自定义CSS文件在Bootstrap的CSS之前引入，哪怕你的选择器优先级够，后面加载的Bootstrap样式也会把你的覆盖掉。

正确的引入顺序应该是：

<!-- 先引入Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.css">
<!-- 再引入你的自定义样式 -->
<link rel="stylesheet" href="your-custom-styles.css">

2. 提高选择器的特异性 #

如果加载顺序没问题还是不生效，那大概率是你的选择器特异性不够。Bootstrap Reboot里的h1样式用的是元素选择器h1（优先级权重：0,0,1），而你用的.h1类选择器权重是0,1,0，理论上更高，但如果Bootstrap本身的.h1类（它自带这个类，用于非标题元素模拟标题样式）在你之后加载，或者你需要更明确的指向，就可以用更具体的选择器：

比如直接选中带.h1类的h1标签：

/* 权重：0,1,1，比单独的h1或.h1都高 */
h1.h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}

如果你的h1在某个特定容器里，还可以加上容器选择器进一步提高特异性（比如.content h1.h1），不过一般上面的写法就足够了。

3. 检查Bootstrap的.h1类冲突 #

哦对了，Bootstrap本身就提供了.h1到.h6的类，用来让其他元素（比如p、div）拥有标题的样式。如果你是给h1标签加了.h1类，那要注意Bootstrap的.h1类样式会不会和你自定义的冲突——只要你的样式在Bootstrap之后，并且选择器不弱于它，就没问题。

举个完整的示例：

<!-- 引入顺序正确 -->
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="custom.css">

<!-- 页面中的h1 -->
<h1 class="h1">我的自定义标题</h1>

/* custom.css里的样式 */
h1.h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #e74c3c;
}

这样写就完全不需要!important，就能稳稳覆盖Reboot和Bootstrap自带的样式啦。

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