横向导航缺失主因是HTML结构或加载链路错误而非CSS：标签拼写错误（如dev代替div）、CSS路径404、position:sticky未设top或父容器overflow:hidden、DOCTYPE/标签闭合缺失等。
横向导航内容缺失，90% 不是 CSS 写错了，而是 HTML 结构或加载链路出了问题——比如 div 拼成 dev、href 路径错位、position: sticky 没设 top，或者浏览器根本没加载到你的 CSS 文件。
检查 HTML 标签是否拼写错误
浏览器对非标准标签（如把 nav 写成 navv、div 写成 dev）不会报错，但会忽略所有匹配该标签名的 CSS 选择器。例如你写了 <dev class="nav"></dev>，那 .nav { background: #333; } 就永远不会生效。
- 用开发者工具 Elements 面板检查目标元素是否真被解析为预期标签（右键 → “Edit as HTML” 看原始拼写）
- 全局搜索项目中是否存在
<dev></dev>、<dvi></dvi>、<navv></navv>等低级拼写变体 - 尤其注意 PHP/JS 模板拼接处，容易因引号嵌套或变量插值漏掉字符
确认 CSS 文件是否真正加载
样式没反应，第一步不是调选择器权重，而是确认浏览器有没有拿到你的 CSS。常见现象是页面纯白底黑字、无间距、无颜色——说明连基础样式都没进来。
- 打开 Network 面板，过滤
css，看style.css或你引入的文件状态码是不是200；如果是404，检查<link href="">中的路径：相对路径多一个./或少一个/都会失败 - 本地双击打开
index.html时，file://协议下href="../css/style.css"会被直接拒绝，控制台报Not allowed to load local resource -
@import必须写在 CSS 文件最顶部，且不能跨域；<style></style>块里用@import是无效的
排查 position: sticky 失效原因
position: sticky 不是开关式属性，而是一个依赖上下文的状态机。只写它，浏览器默认当 position: relative 处理——top 值才是触发粘性的唯一开关。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
top（如top: 0），且不能同时写top和bottom，部分浏览器会整条规则忽略 - 父容器只要加了
overflow: hidden、transform: translateZ(0)或filter: blur(1px)，就会切断滚动上下文，sticky失效 - 用开发者工具 Computed 面板确认最终生效的
position是sticky，不是回退成relative - React/Vue 框架可能自动包裹一层匿名
div，它没有高度也没有滚动能力，导致sticky找不到可滚动祖先
验证 HTML 文档结构是否完整
横向导航内容“看起来没加载”，也可能是整个 DOM 树压根没构建成功。典型表现是 Elements 面板里 document.documentElement 下只有空标签、无 、无 <nav></nav> —— 这不是 JS 报错，是浏览器没解析出完整结构。
- 检查是否漏写
、<code>、、，尤其注意<script></script>块内写了if (x 却没转义 <code>，浏览器会误认为是新标签开始 -
<textarea></textarea>或<pre class="brush:php;toolbar:false;"></pre>里的原始文本含<div> 类字符串且未转义，也会破坏解析流 <li>双击打开 HTML 文件时，<code>document.body在 Console 里输出为null或undefined，说明 DOM 构建中途终止
横向导航的问题往往藏在最基础的地方：标签拼错、路径少个点、top 忘写、overflow: hidden 意外加在父容器上……这些地方不显眼，但一旦出错，整段导航就“消失”了。别急着重写 CSS，先看 Elements 面板里那个 nav 元素到底存不存在、是不是你写的那个名字、有没有被正确包裹进 body。
