javascript - CSS 目标选择器

Question

当您仅使用 CSS 单击 anchor 标记“单击我”时，有没有办法显示 p 标记“这是我的答案”？我知道我可以将 p 标记放在 anchor 标记之后并让它工作，但我想知道是否有办法让它与下面的代码一起工作？

  <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 记录的 hack，用于控制带有隐藏复选框的元素。这似乎确实跨越了“应该”的界限，但当然，这是可能的。

更多阅读: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>