如何引用两个CSS样式表？HTML新手样式表引用失效求助

嘿，我一眼就揪出问题啦！你把两个样式表的路径塞进同一个<link>标签里了，这完全不符合HTML的规范，浏览器根本没法正确识别本地的style.css文件。

错误原因分析 #

你的原代码是这样的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css; style.css">

这里用分号把两个路径硬凑在一起，浏览器只会解析第一个远程Bootstrap的URL，直接忽略了后面的style.css，所以本地样式压根没被加载。

正确的写法 #

你需要用两个独立的<link>标签分别引入两个样式表，而且要把本地的style.css放在Bootstrap样式表的后面——因为CSS遵循「后面的样式优先级更高」的规则，这样你的本地样式才能覆盖Bootstrap的默认样式：

<!-- 先引入Bootstrap远程样式 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 再引入本地样式表 -->
<link rel="stylesheet" href="style.css">

额外检查点（如果还是不生效的话） #

• 确认style.css文件和你的HTML文件在同一个文件夹里，如果不在，要写正确的相对路径，比如样式表在css子文件夹里，路径就要写成href="css/style.css"。
• 强制刷新浏览器缓存：按Ctrl+F5（Windows）或Cmd+Shift+R（Mac），有时候浏览器会缓存旧的样式文件，导致新修改的样式不生效。
• 打开浏览器开发者工具（按F12），切换到「Network」标签，刷新页面后看看style.css的加载状态，如果显示404，说明路径写错了，得调整路径。

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