html - 为什么我们可以在显示属性为 none 时切换复选框

Question

看起来当复选框被标签元素包裹时，即使我们将显示属性设置为无，我们仍然可以切换它。

label input {
  display: none;
}

label span.y {
  display: none;
}

label span.n {
  display: inline;
}

label input:checked~span.y {
  display: inline;
}

label input:checked~span.n {
  display: none;
}

<label>
        <input type="checkbox">
        <span class="y">Checked!</span>
        <span class="n">Click me!</span>
</label>

这让我很困惑，如果你能为我解释一下，我将不胜感激

Answer 1

根据 w3cschool - 标签为鼠标 用户提供了可用性改进，因为如果用户单击 元素 中的文本，它会切换 控件。