因为浏览器、爬虫和屏幕阅读器只识别HTML标签语义，不解析class名，div class="nav"被当作普通容器，无法触发导航地标，导致SEO关键词权重降低、键盘导航失效、Lighthouse报错且WCAG 1.3.1不达标。
为什么直接用 div class="nav" 会拖慢 SEO 和可访问性？
因为浏览器、爬虫、屏幕阅读器根本不看 class 名。它们只认标签语义。div class="nav" 在技术层面就是普通容器，不会被识别为导航地标（navigation landmark），导致：
- 搜索引擎无法判断这是主导航，降低关键词权重分配
- 键盘用户按
Tab或Ctrl+Alt+Num5（NVDA 快捷键）跳不到导航区 - Lighthouse 检测直接报「Missing navigation landmark」错误
- 多导航场景（如页头+页脚）下，
aria-label缺失会导致屏幕阅读器读成“链接组1”“链接组2”，用户完全分不清
nav 里必须套 ul 吗？不用会出什么问题？
必须。不是为了好看，是语义强制要求。导航项本质是“一组相关链接”，HTML 规范明确要求用 ul/ol 包裹，否则：
- 辅助技术把所有
a连读成一串无停顿文本，比如“首页关于我们产品服务联系我们”——用户听不出哪是哪个入口 - 某些 AT（如 JAWS）在列表模式下无法进入/退出导航流
- WCAG 1.3.1（信息与关系）不达标，影响无障碍认证
- 即使 CSS 清除了
ul默认样式，结构语义仍保留；用span或div平铺就彻底丢失了“列表”这一层含义
大型分类导航的下拉菜单，用 details 还是 ARIA menu？
优先用 details + summary，除非需要键盘方向键控制子项聚焦。原因很实际：
-
details原生支持open属性、toggle事件，无需 JS 就能展开收起，降级友好 - 它自动处理焦点管理：点击
summary后，焦点会进入details内容区，比手写 ARIArole="menu"安全得多 - 但注意：
details不能嵌套（details里再放details会失效），二级以上分类必须退回到 ARIA 模式或改用 JS 控制 - 如果用了 ARIA menu，
role="menuitem"必须配aria-haspopup="true"和aria-expanded，且每次展开/收起都要手动同步 DOM 属性
CSS 样式隔离怎么做才不污染全局？
电商导航常被复用在多个页面，一旦用 .nav a:hover 这类宽泛选择器，很容易和 footer、sidebar 的链接样式打架。关键动作只有两个：
立即学习“前端免费学习笔记（深入）”；
- 给整个导航外层加唯一 BEM 块名，比如
<nav class="category-nav">，所有样式前缀都从这里开始 - 避免使用元素选择器（如
ul、li、a）单独声明，全部走 class，例如.category-nav__list、.category-nav__item、.category-nav__link - 如果用 CSS-in-JS 或 Shadow DOM 不现实，至少用
:where(.category-nav) ul降低 specificity，防止被其他样式覆盖 - 特别注意伪类：不要写
.category-nav a:hover，而要写.category-nav__link:hover，否则子菜单里的a也会被意外命中
复杂点在于下拉菜单的定位层级和 z-index 管理——它必须高于 banner、轮播图，但又不能盖住固定 header。这个值往往要实测，而不是凭空设个 999。
