html - 目标元素不响应

Question

我正在尝试执行 left_warrper不可见，在用户点击“点击我” 按钮后，left_warrper变为可见，但 :target元素由于某种原因不工作

.left_wrapper {
  background: rgba(0,0,0,.7);
  cursor: default;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  bottom: 0;
  visibility: hidden;
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}

:target .left_wrapper {
    opacity: 1;
    visibility: visible;
}

<a href="#sidebar" style="position:absolute;right:0px;z-index:1;">click me</a>
  <div id="sidebar" class="wrapper">
      <div class="slide">
      </div>
  </div>
<a href="#" class="left_wrapper"></a>

Young Kyun Jin 效果很好，但是当我将代码添加到主 .html 页面时，我做了一些更改，比如添加了 <nav>元素，现在它又不起作用了，我怎么能检测到它呢？

代码如下:

<nav id="menu">
<img src="Logo.png" style="position: fixed; width: 30%; top: 10px; left: 10px;">
    <a href="#sidebar"><img src="../img/menu.png" style="position: fixed; top: 22px; right: 10px;"></a>
      <div id="sidebar" class="wrapper">
          <div class="slide">
            <a class="close" href="#">&times;</a>
          </div>
      </div>
    </nav>
    <a href="#" class="left_wrapper"></a>

Answer 1

.left_wrapper {
  background: rgba(0,0,0,.7);
  cursor: default;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  bottom: 0;
  visibility: hidden;
  -webkit-transition: opacity .5s, visibility 0s linear .5s;
  transition: opacity .5s, visibility 0s linear .5s;
}

:target ~ .left_wrapper {
    opacity: 1;
    visibility: visible;
}

<a href="#sidebar" style="position:absolute;right:0px;z-index:1;">click me</a>
  <div id="sidebar" class="wrapper">
      <div class="slide">
      </div>
  </div>
<a href="#" class="left_wrapper"></a>

:target ~ .left_wrapper

~是兄弟选择器