当我使用#element：target #otherelement时，它不起作用

Question

因此，我试图以此方式使用:target：

#Menu:target #buttons {
    dipslay: flex !Important;
}

这根本不起作用。它甚至没有显示在DOM中。这是HTML结构：

<a href="#Menu" id="Menu">&#9776;</a>
<span id="buttons">
</span>

那我在做什么错呢？ 它应类似于以下示例： https://www.html-seminar.de/rwd/nav-responsive-design-ohne-js.htm#nav-menue

将此网站的大小调整为500px，然后单击右上角的蓝色按钮。

点击按钮，您会看到菜单正在打开。

Answer 1

您的span#buttons位于a#Menu标记之外，但为了正常工作，它应该位于{...内。...仅供参考，为了避免可能，最好使用一个类来标记按钮将来会复制非常通用的ID buttons。

<a href="#Menu" id="menu">
   &#9776;
   <span class="menu-buttons">
   </span>
</a>

CSS将如下所示：

#menu:target .menu-buttons {
    dipslay: flex;
}