集成Bootstrap 5后，HTML页面无法读取main_styles.css样式表的原因是什么？

你的问题很清晰——自定义样式表main_styles.css无法加载的核心原因是<link>标签的属性用错了。

对于加载CSS样式表的<link>标签，我们需要使用href属性来指定样式文件的路径，但你代码里写成了src。src属性是给<script>、<img>这类标签使用的，<link>标签并不识别它，所以浏览器自然找不到你的自定义样式文件。

修正后的代码 #

把src改成href就能解决加载问题，另外建议把自定义样式表放在Bootstrap样式表的后面，这样自定义样式才能正确覆盖Bootstrap的默认样式：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/main_styles.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

额外排查点 #

如果改完属性还是加载失败，你可以检查这两点：

• 确认/main_styles.css的路径是否正确：服务器根目录下是否真的存在这个文件？如果你的HTML文件在子目录里，可能需要调整路径（比如用../main_styles.css或者相对路径）。
• 打开浏览器开发者工具（F12），切换到「网络」标签，刷新页面查看main_styles.css的请求状态：如果是404，说明路径有误；如果是其他状态码，再针对性排查。

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