bootstrap 5 的 css 媒体查询被原生样式覆盖，通常是因为浏览器加载样式的优先级顺序或选择器特异性（specificity）导致的。如果自定义样式写在 bootstrap 核心文件之后，且没有使用更高的特异性或 !important，浏览器会优先应用后加载的样式。要解决这个问题，需要确保自定义样式表在 bootstrap 之后引入，并通过增加选择器层级或使用 !important 来强制提升优先级。
如何调整样式表的引入顺序以解决冲突
将自定义 CSS 文件放在 Bootstrap 的 <link> 标签之后，是解决此类问题的第一步。浏览器按代码出现的顺序解析样式，后出现的规则会覆盖先出现的同名规则。例如，如果 Bootstrap 设置了 .card { background: white; }，而你的自定义文件在后面定义了相同的类，那么自定义背景色就会生效。若仍被覆盖，说明 Bootstrap 使用了更复杂的组合选择器，此时需检查 HTML 结构并相应地增加自定义选择器的层级。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Override Test</title>
<!-- 1. 先引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. 后引入自定义 CSS -->
<link href="custom.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card p-4">
<p>This text should be red.</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/gongju/2905" title="CSS"><img
src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/gongju/2905" title="CSS">CSS</a>
<p>CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p>
</div>
<a href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</div>
</body>
</html>预期结果：当 custom.css 中包含 .card p { color: red; } 时，段落文字会显示为红色。如果 custom.css 放在 Bootstrap 之前，则文字保持 Bootstrap 默认的黑色。
如何通过提高选择器特异性来覆盖 Bootstrap 默认值
当引入顺序正确但仍被覆盖时，是因为 Bootstrap 的选择器特异性更高。可以通过给元素添加父级 ID 或增加类名数量来提高特异性。例如，Bootstrap 的 .btn-primary 特异性较低，若要在不修改源码的情况下覆盖它，可以在自定义 CSS 中使用 #my-container .btn-primary 这样的选择器。这种方法比使用 !important 更推荐，因为它保持了样式的可维护性。
/* custom.css */
/* 低特异性：可能被 Bootstrap 覆盖 */
.btn-primary {
background-color: blue;
}
/* 高特异性：成功覆盖 Bootstrap 默认值 */
#app-wrapper .btn-primary {
background-color: green !important;
}预期结果：带有 btn-primary 类的按钮背景色变为绿色。如果不加 !important 且特异性不足，颜色可能仍为 Bootstrap 默认的蓝色。
为什么特定断点下的媒体查询失效
在 Bootstrap 5 中，媒体查询是基于最小宽度（min-width）构建的。如果在自定义媒体查询中使用了不同的断点值，或者在 Bootstrap 的断点之后重新定义了相同属性的样式，可能会导致样式失效。例如，Bootstrap 在 @media (min-width: 768px) 下设置了 .col-md-6 的宽度，如果你在自定义文件中在 @media (min-width: 992px) 下再次设置该类的宽度，可能会破坏原有的网格布局。应始终参考 Bootstrap 的官方断点文档，确保自定义媒体查询与框架保持一致。
