根本原因是CSS伪类顺序错误或作用域未隔离，必须按LVHA顺序（:link→:visited→:hover→:active）书写并限定类名作用域，且:visited仅支持有限样式属性。
横向导航栏里链接颜色在不同状态下不变化，根本原因不是布局写错了，而是 CSS 伪类顺序或作用域没理清——a:hover 写在 a:visited 后面、或者用 .nav a 但漏了 .nav a:visited，都会导致悬停/点击色失效。
必须按 LVHA 顺序写伪类规则
浏览器解析 CSS 是自上而下覆盖的。a:visited 匹配优先级高于 a:hover，如果顺序反了，已访问过的链接就永远触发不了悬停色。
-
正确顺序只能是：
a:link→a:visited→a:hover→a:active - 哪怕只设两个状态，也要保持相对位置，比如只改未访问和悬停色，就得写成：
a:link { color: #007bff; } a:hover { color: #e74c3c; } - 别用
a单独声明，它会同时覆盖:link和:visited，导致已访问链接失去视觉区分
导航栏要加类名隔离作用域
直接写 a:link 会污染全文所有链接，页脚、正文、侧边栏的链接全跟着变。横向导航栏必须用独立 class 控制范围。
- HTML 中给导航容器加 class，例如：
- CSS 中限定作用域：
.main-nav a:link { color: #333; } .main-nav a:visited { color: #666; } .main-nav a:hover { color: #007bff; } .main-nav a:active { color: #0056b3; } - 不推荐用 ID（如
#nav a），ID 无法复用，也不利于组件化
:visited 状态有硬性限制，别白费劲
现代浏览器出于隐私保护，禁止对 a:visited 应用除颜色类以外的样式。你写了 font-size 或 transition，整条规则会被丢弃——连 color 都不生效。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 只允许的属性包括：
color、background-color、border-color（含各方向）、outline-color、column-rule-color - 常见错误：给
a:visited加text-decoration: underline—— 这个属性不被支持，规则直接失效 - 移动端
:active持续时间极短，几乎不可见；如需点击反馈，得靠 JS 切换 class
横向布局本身不影响颜色逻辑，但要注意 display 类型
导航栏常用 display: block 或 display: inline-block 让 填满 ，但这和颜色状态无关。真正容易出错的是：悬停效果没反应，其实是 a 没撑开，鼠标实际悬停在空白区域。
- 确保链接是块级行为：
.main-nav a { display: block; padding: 12px 20px; } - 检查父元素有没有
pointer-events: none，或者被其他透明元素遮挡 - 避免用
float布局后忘记清除浮动，导致容器高度塌陷，a实际可点击区域变小
最常被忽略的一点：很多人以为只要写了 a:hover 就万事大吉，但没意识到 :visited 的安全限制会让整套状态逻辑“断一环”，结果测试时发现已访问链接死活不变色——不是代码写错了，是浏览器故意不让你动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
