火狐切换设备调试时两个section同时触发:target伪类的异常问题

问题成因 #

该问题是火狐浏览器开发者工具设备模拟模块的专属bug，和你的业务代码逻辑无关：

• 火狐切换设备模拟模式时，会触发一次特殊的页面上下文软重置，这个过程中CSS伪类的状态缓存没有被正确清理，会保留切换前的:target匹配状态
• 后续点击锚点触发hash跳转时，新的:target匹配状态被正常写入，但旧的状态没有被清除，最终导致两个section同时命中:target规则，出现同时显示的异常

是否为火狐独有问题 #

是的，该问题仅出现在火狐开发者工具的设备模拟场景下：

• 其他浏览器（Chrome、Edge、Safari等）的设备模拟功能没有该问题
• 火狐普通浏览模式（不开启开发者工具、不触发设备模拟切换操作）也不会复现该问题
• 仅调整窗口大小、旋转屏幕等普通用户可触发的操作，也不会触发该异常

线上环境是否可以安全运行 #

你的代码完全可以正常上线运行，没有风险：

• 普通用户的真实使用场景中，不存在触发「切换开发者工具设备模拟」这个操作的可能，完全不满足异常触发的前置条件
• 你的CSS逻辑完全符合W3C标准，正常浏览场景下:target伪类同一时间最多只会匹配一个页面锚点元素，只会有一个section处于显示状态

如果追求极致稳妥，可以额外加一段极简单的JS做兜底兼容（非必须）：

window.addEventListener('hashchange', () => {
  document.querySelectorAll('section').forEach(sec => {
    sec.classList.toggle('active', sec.id === location.hash.slice(1))
  })
})

对应把CSS规则调整为:target和类名并联即可：

.section {
    @include clearfix();
    min-height: 100vh;
    width: 100%;
    position: relative;
    display: none;
    &:target, &.active {
        display: block;
    }
}

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