为何自定义CSS无法与Bootstrap 5协同生效？

• 调整CSS加载顺序
  将你的自定义CSS文件放在Bootstrap官方CSS文件之后引入。CSS遵循“后加载样式优先级更高”的规则，只要选择器权重一致，后加载的自定义样式就能直接覆盖Bootstrap的默认样式。

• 提升选择器特异性（权重）
  Bootstrap的多数样式基于类选择器实现，你可以通过组合选择器提高自定义样式的权重：

  • 给目标元素添加专属自定义类，结合Bootstrap类使用：

    /* 无需!important的写法 */
    .dashboard-custom-card.card {
      background-color: #f5f5f5;
    }
    

  • 借助父元素选择器嵌套定位：

    #dashboard-wrapper .card {
      background-color: #f5f5f5;
    }
    

  • 避免使用权重极低的通用选择器（*）或单一标签选择器，这类选择器极易被Bootstrap样式覆盖。

• 利用Bootstrap变量与预处理器定制
  如果使用Bootstrap的Sass/LESS源码构建项目，直接修改内置变量即可替换默认样式，完全不需要额外写自定义CSS：

  $card-bg: #f5f5f5;
  @import "../node_modules/bootstrap/scss/bootstrap";
  

这种方式贴合Bootstrap设计逻辑，从根源避免优先级冲突。

• 通过开发者工具排查冲突
  用浏览器F12开发者工具查看元素的样式面板，找到被划掉的自定义样式，确认是哪个Bootstrap选择器权重更高，再针对性调整自己的选择器结构。

• 避免全局样式污染
  不要编写body * { ... }这类宽泛的全局样式，这类代码会和Bootstrap全局样式冲突且难以调试。尽量给需要定制的元素添加专属类名，精准定位样式范围。

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