下面的 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 中的任意位置单击以检查其隐藏的单选按钮。
任何人都可以解释这个非常有用但可能没有记录的怪癖吗？
最佳答案
我刚刚找到了我自己问题的答案。
这是因为在“label”中单击控制单选按钮。请参阅:https://www.w3schools.com/tags/tag_label.asp
我将把这个问题留在这里，因为其他人可能会发现这个相对节俭的代码很有用。
关于html - 为什么单击 div 会检查隐藏的单选按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49697387/