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

Question

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

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

on w3cschool - 标签为鼠标用户提供了可用性改进，因为如果用户点击元素中的文字，则切换控件。