CSS目标选择器

Question

是否有显示方式p标签“这就是我的回答”当你点击锚标记“点击我”只用CSS ？ 我知道我可以在anchor标签之后放置p标签并使其工作但是我想知道是否有办法使它能够使用下面的代码？

  <ul>
     <li>
        <div>
           <a href="one" id="one"> Click me </a>
        </div>
     </li>
        <div class="info">
           <p> This is my answer </p>
        </div>
   </ul>


li {
    list-style: none;
}

.info {
    display:none;
  }

.info:target {
    display:block;
}

https://jsfiddle.net/vwep64bd/2/

Answer 1

这是一个只有CSS记录的黑客来控制隐藏复选框的元素。 这绝对似乎跨越了“应该”的界限，但当然，这是可能的。

欲了解更多信息，请访问： https ： //css-tricks.com/the-checkbox-hack/

  li { list-style: none; } label.link { color: blue; text-decoration: underline; cursor: pointer; } div.info { display: none; } #toggle-1 { display: none; } #toggle-1:checked ~ div { display: block; } 

 <ul> <li> <div> <label class="link" for="toggle-1">Click Me</label> </div> </li> <input type="checkbox" id="toggle-1"> <div class="info"> <p> This is my answer </p> </div> </ul>