目标元素不响应

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>

这是工作出色的年轻筠金，但是当我的代码添加到主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

~是兄弟选择