なぜ表示プロパティが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>

それは私をたくさん混乱あなたはw3cschool上あたりとして私

Answer 1

のためにそれを説明することができれば、私はそれを感謝します - ラベルがマウスユーザーのためのユーザビリティの向上を提供しますユーザーが要素内のテキストをクリックした場合、は、コントロールをトグルするためです。