如何使用：target扩展容器？

Question

我想知道可以使用嵌套的＆＃34;：target＆＃34;使用纯CSS修改页面上元素的指令。我引入了一个表单文本区域，它绝对位于div元素（.container）中。当文本区域出现时，我想要3件事：

1）开放链接到消失 2）出现的关闭链接 3）使用表单元素扩展的contaner div

我一直在通过在我的.container中嵌套：target元素来尝试这个，但它不起作用。这可能吗？

<div class="container" id="container">
  <h4><a href="#comments" id="open">Show</a>&nbsp;&nbsp;<a href="#" id="close">close</a></h4>
 <div id="comments">
  <form name="myForm">
  <p>Write your comment:<br />
  <textarea name="myTextarea"></textarea></p>
  </form>
 </div>
</div>

CSS

.container{
  position:relative;
  background:pink;
   &:target {
    transition: all 1s ease;  
    a#open { display: none; }
    a#close {display: block;}
  }  
  a#close { display: none; }

}
#comments {
  position:absolute;
  height:200px;
  width:400px;
  background:yellow;
  left:-300%;
  top:30px;
  transition: all 1s ease;
}

#comments:target {
  transition: all 1s ease;
  left:20px;


}

JSFiddle here