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>