a标签href属性导致CSS :focus伪类不生效的原因与解决方法

• 核心机制是原生锚点跳转的焦点转移规则。当点击设置了href="#目标锚点名"的锚点元素时，浏览器完成原生跳转流程后，会自动将焦点从被点击的导航按钮，转移到对应的内容区目标DOM节点上。原本停留在导航按钮上的:focus状态会被瞬间移除，自定义的选中样式自然无法生效。
• 设置了href="javascript:void(0)"的锚点，因为没有触发原生URL跳转逻辑，焦点始终停留在被点击的元素本身，:focus样式可以正常触发。观测到D.1-D.4子菜单锚点样式生效的场景，本质是跳转目标与当前视口距离过近，浏览器没有完成完整的焦点移交动作，属于偶发的正常表现，不是逻辑层面的兼容。
• 现有CSS的选择器存在硬错误：a:focus .sidebar-btn这条规则匹配的是a标签内部的、带sidebar-btn类的子元素，但导航锚点本身就是带sidebar-btn类的a标签，不存在嵌套关系，这条规则从编写完成后就从未生效过。

可同时满足锚点跳转、二级菜单展开、所有导航按钮选中态样式正常生效三个需求，具体调整分三步：

修正CSS规则 #

删除无效的重复选择器，匹配正确的目标元素，同时移除浏览器默认的焦点轮廓，避免样式冲突：

.sidebar-btn:focus,
.sidebar-btn:focus-visible {
  outline: none;
  color: #000 !important;
  background-color: #ccc !important;
}

.sidebar-btn-hover:hover {
  color: #000 !important;
  background-color: #ccc !important;
}

拦截原生跳转的焦点转移 #

给所有导航按钮绑定统一的点击处理逻辑，在完成跳转后主动把焦点拉回当前点击的导航按钮上，避免焦点被移到内容区：

// 原有手风琴逻辑保留
function myAccFunc() {
  var x = document.getElementById("demoAcc");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }
}

// 补充全局导航按钮的点击拦截
document.querySelectorAll('.sidebar .sidebar-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    const targetHref = btn.getAttribute('href');
    // 处理锚点跳转类的按钮
    if (targetHref && targetHref.startsWith('#')) {
      e.preventDefault(); // 阻止默认跳转带来的焦点转移
      const targetEl = document.querySelector(targetHref);
      if (targetEl) {
        targetEl.scrollIntoView({ behavior: 'smooth' });
      }
    }
    // 主动将焦点重置回当前点击的导航按钮，阻止浏览器自动滚动调整焦点位置
    btn.focus({ preventScroll: true });
  })
})

无需改动原有HTML结构 #

带href="javascript:void(0)"的D按钮、C按钮，因为没有锚点跳转目标，绑定上述统一逻辑后，点击时焦点会正常停留在元素本身，选中态样式可以自动生效，不需要额外修改属性或事件绑定。

注意：上述逻辑不会破坏原生可访问性，使用键盘Tab导航时，焦点样式依然会按照浏览器默认行为正常展示，不会影响屏幕阅读器的识别能力。

内容的提问来源于stack exchange，提问作者Fred