:focus样式出问题主因是导航容器（如）不可聚焦且未配role/keydown监听，而非样式错误；应聚焦语义元素，禁用正数tabindex，:focus与:focus-visible须共存且:focus在前。

为什么导航栏的 :focus 样式总出问题

不是样式没写对，而是浏览器对

内部元素的焦点行为有隐含规则：原生可聚焦元素（如 @#@#@#@#@#@#@#@#@#@0：默认可聚焦，删掉所有 tabindex="0"

菜单：同上，加 tabindex="-1" 会主动踢出 Tab 流，除非是 JS 动态聚焦目标（比如下拉触发后聚焦首项）

折叠面板

：这是唯一需要 tabindex="0" 的场景，但必须同步监听 keydown 响应 Enter 和 Space，并设 role="button"

正整数 tabindex（如 tabindex="1"）必须彻底删除——它不保证顺序稳定，且会让焦点流在 React/Vue 中不可预测。

下拉菜单的方向键导航怎么不卡顿

方向键（ArrowDown、ArrowUp）必须在 keydown 阶段拦截，且优先用 event.key 判断。在 keyup 处理会导致页面已滚动、你的逻辑失效。

• 监听容器的 keydown，不是每个子项单独监听（性能差、易漏）
• 第一时间调用 event.preventDefault()，否则 ArrowDown 会触发页面滚动
• Home/End 键要直接跳转到首项/末项，别依赖连按多次 Arrow 键
• 缓存当前聚焦索引，避免每次方向键都重新 querySelectorAll 查 DOM
• Tab 离开下拉区域时，用 focusin + container.contains(document.activeElement) 检测，手动 focus() 回内部首项或上一次活跃项

注意嵌套：外层导航栏不该拦截内层下拉菜单自己的焦点转移，可用 data-focus-lock 类做层级标记。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

:focus 和 :focus-visible 样式怎么共存不打架

只写 :focus-visible 会导致鼠标点击无反馈；只写 :focus 又会让所有聚焦都套蓝框，视觉混乱。二者必须共存，且顺序不能错。

• a:focus 应设轻量提示，例如 outline: 1px dotted #999; 或 box-shadow: 0 0 0 2px rgba(0,122,255,0.3);
• a:focus-visible 必须显式覆盖 outline，并加 outline-offset: 2px 避免与相邻元素粘连
• 绝对不要写 *:focus { outline: none; } —— 它会干掉 :focus-visible 的样式
• 自定义按钮（div[role="button"]）需监听 keydown 才能激活 :focus-visible，否则 Chromium 可能拒绝匹配

移动端真机测试容易被忽略：iOS 点击会先触发 :active 再短暂触发 :focus，叠加系统点击高亮，导致样式冲突。用 * { -webkit-tap-highlight-color: transparent; } 去掉高亮，但别用 touchstart + blur() 破坏键盘流。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！