когда я использую #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-responseive-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;
}