目標元素不響應

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

~是兄弟選擇