双击打开index.html样式不生效是因为file://协议下浏览器安全限制导致CSS等资源加载失败；验证方法是用本地服务器（如python3 -m http.server）运行，若http://localhost正常则证实为协议问题。
直接双击打开 index.html 时样式不生效，基本可以确定不是代码逻辑问题，而是浏览器本地文件系统限制 + 资源加载路径失效导致的。现代浏览器出于安全策略，会阻止 file:// 协议下跨目录读取 CSS/JS 等资源，或对相对路径解析异常——这和部署到服务器（http:// 或 https://）后的行为完全不同。
为什么双击打开 index.html 就没样式？
根本原因是：file:// 协议下，浏览器禁用部分 Web API、限制跨目录访问、且对相对路径解析更严格。比如：link href="css/style.css" 在 Chrome/Firefox 中可能因当前工作目录不可靠而失败；Safari 更激进，甚至拒绝加载非同目录下的任何外部 CSS。
- 开发者工具 Network 面板里能看到
style.css状态是failed或net::ERR_FILE_NOT_FOUND - 控制台（Console）出现类似
Not allowed to load local resource的报错 - HTML 结构渲染正常，但所有颜色、间距、布局全回退到浏览器默认值
- 把整个文件夹拖进浏览器地址栏（
file:///.../index.html）和双击打开行为一致，都属 file:// 上下文
怎么快速验证是不是路径或协议问题？
不用改一行代码，先做三件事：
- 打开终端，进入
index.html所在目录，运行python3 -m http.server 8000（Python 3）或python -m SimpleHTTPServer 8000（Python 2） - 浏览器访问
http://localhost:8000/index.html—— 如果这时样式立刻正常，100% 是 file:// 协议限制所致 - 检查
index.html中所有href和src属性：是否用了../css/这类向上跳转？file:// 下这类路径极容易失效，建议统一改为同级或子级相对路径（如css/style.css）
常见但隐蔽的 HTML 结构错误
即使路径没错，样式也可能白加载——因为浏览器压根没把你的 link 当成有效资源。
立即学习“前端免费学习笔记（深入）”；
- 缺失
<!DOCTYPE html>：某些旧版浏览器或严格解析模式下，会触发怪异模式（Quirks Mode），导致 CSS 解析异常 - 没有包裹
<html>标签：仅写<head><link></head><body></body>是不合法的，浏览器可能丢弃head内容 - CSS 文件本身含
<style>标签：外部 CSS 文件（style.css）必须是纯规则文本，不能带任何 HTML 标签，否则整文件被当无效内容忽略 -
link标签漏写rel="stylesheet"：只写href不加rel，浏览器不会当作样式表处理
移动端或离线场景下特别要注意
在手机上通过文件管理器点开 index.html，或把页面保存为“网页，全部”后离线查看，同样走 file:// 协议。此时还多一层风险：
- iOS Safari 对本地 CSS 加载极其保守，哪怕路径完全正确，也可能静默跳过
- Android 某些定制浏览器（如华为/小米自带）会主动拦截
file://下的外部资源请求 - 如果用了
@import，注意它必须出现在 CSS 文件最顶部，且不能用于<style>块内——file:// 下出错更难排查 - 图片、字体等其他静态资源也面临同样路径问题，别只盯着 CSS
真正卡住人的地方，往往不是 CSS 写得不对，而是你一直在用错误的方式运行它。只要确认能通过 http://localhost 正常加载，就说明代码本身没问题，剩下的只是环境适配问题——别花时间调选择器权重或 specificity，先换协议跑起来。
