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

【问题标题】：Why does clicking the div check the hidden radio button?为什么单击 div 会检查隐藏的单选按钮？
【发布时间】：2023-03-27 18:55:01
【问题描述】：

下面的 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 中的任意位置单击以检查其隐藏的单选按钮。

谁能解释这个非常有用但可能没有记录的怪癖？

【问题讨论】：

标签： html css label hidden radio

【解决方案1】：

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

这是因为在“标签”内单击可以控制单选按钮。见：https://www.w3schools.com/tags/tag_label.asp

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

【讨论】：

【解决方案2】：

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

【讨论】：