先看這個例子
勾選框意思是「突出這個示範」，只改本地邊線，不批准或放行任何紀錄。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 未剔 | 查看原生已選狀態 | 父層邊線灰色 |
| 已剔 | 剔選勾選框 | 父層邊線綠色 |
| 配對方向 | 查看父層 :has | 按後代狀態配對父層 |
瀏覽器怎樣處理
:has 是以父層為錨點的關係選擇器，可按相對選擇器配對已剔後代。原生勾選框提供狀態，CSS 提供顯示規則；仍須核對真正引擎支援。
後代選擇器不會往上找父層
反例把 .sample 寫在 input:checked 後面，變成找 input 內的後代。
<style>body{margin:8px}</style>
<style>.sample{border:2px solid rgb(140,140,140)}input:checked .sample{border-color:rgb(0,80,40)}</style><section class="sample"><label><input id="show" type="checkbox">突出這個示範</label></section>剔選後父層仍灰色，因為該選擇器在本樹沒有配對元素。
試着修正
剔選這個顯示示範，是否等於放行存貨？
查看參考答案
不是，只實作 CSS 邊線變色。業務放行須有自己的已授權操作。
- 關閉 JavaScript，查看真正原生剔選。
- 核對支援及邊線計算值，不用靜態綠框假定成功。