css - CSS :target 和 :not(:target) 与 display: block/display:none 不能按预期工作

Question

我开始开发一个页面，其核心思想是使用 ID 标记部分并使用 css 规则切换：

&:target {
        display: block;
    }
    &:not(:target) {
        display: none;
    }

但是，它的行为方式与预期不同。我对 :target 的理解使我相信 ID 不等于 target 的部分将不会显示。令我惊讶的是，当我在 FF 中检查页面行为时，我注意到实际上呈现的是两个部分的组合。重现的步骤如下：

1. 在 FF 中使用桌面打开我的页面（我使用 1440/900 设备）
2. 单击“最左侧”按钮，该按钮应将您带到#aboutme 部分
3. 转到控制台中的移动视图并选择屏幕低于 768 像素的设备（我至少检查了 iPhone 6/7/8 和宽度为 566 像素的自定义设备。
4. 单击底部的红色三角形，它将带您进入#Introduction。然后你应该会看到这样的东西：bad view 过去我也检查过一些其他的 open/resize/go to 序列，结果是相似的。有人可以解释一下出了什么问题吗？代码一可以在这里看到：代码

标签： css