Question

以下CSS / HTML完全符合我的要求，但我不知道为什么。

<html>
<head>
<style>
input[type=radio] { display: none }
label > div { background: yellow }
label > div:hover { background: pink }
input[type=radio]:checked + div { background: red }
</style>
</head>
<body>
<label><input type="radio" name="r"><div>one</div></label>
<label><input type="radio" name="r"><div>two</div></label>
<label><input type="radio" name="r"><div>three</div></label>
</body>
</html>

我尝试了三种浏览器，他们都接受了div中任意位置的点击，以检查其隐藏的单选按钮。

任何人都可以解释这个非常有用但可能没有记载的怪癖吗？

Answer 1

我刚刚找到了自己问题的答案。

这是因为在'label'内点击会控制单选按钮。请参阅：https://www.w3schools.com/tags/tag_label.asp

我会在这里留下这个问题，因为其他人可能会发现这个相对节俭的代码很有用。

Answer 2

在您的代码中，您有一个不会显示的隐藏元素，但它仍然提供了单击选项。而且你还有一个从左到右一直延伸的元素。你把它们放在一个元素里面。当您将单选按钮和div放在标签内时，元素的大小由于元素而从左向右延伸，并且它还具有可单击选项，因为它内部具有无线电（隐藏）。我希望这能回答你的问题。

为什么单击div检查隐藏的单选按钮？

2 个答案: