时间戳

首页 > 解决方案 > 当我使用 #element:target #otherelement 时它不起作用

html - 当我使用 #element:target #otherelement 时它不起作用

问题描述

所以我试图以: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

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

在那里你可以看到当你点击按钮时菜单正在打开......

标签： htmlcss

解决方案

你span#buttons在a#Menu标签之外，但要正常工作，它应该在里面......也仅供参考，最好使用一个类来标记按钮，以避免buttons将来可能重复相当通用的 ID。

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

CSS 看起来像这样：

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

推荐阅读