复选框未选中态无法直接样式化，必须隐藏原生控件（appearance: none）并用::before/::after伪元素模拟；:not(:checked)仅作状态开关或影响兄弟元素，不能直接美化勾选框本身。
复选框默认样式无法直接修改未选中状态
浏览器对 <input type="checkbox"> 的未选中态（空勾）做了强限制：原生控件本身不渲染为可样式化的盒子，:not(:checked) 能匹配到元素，但你没法靠它给「勾选框那个小方块」加背景色或边框——因为那部分根本不在 CSS 样式作用域内。
常见错误现象：input[type="checkbox"]:not(:checked) { background: red; } 完全无效；有人误以为加了 appearance: none 就能直接操作，但没重置后的内容载体，依旧看不到效果。
真正可行的路径只有一条：隐藏原生控件 + 用 ::before/::after 或相邻标签模拟视觉层。而 :not(:checked) 在这里的作用，是作为「切换视觉状态」的开关依据。
必须配合 appearance: none 和自定义伪元素
不移除原生外观，所有后续样式都是徒劳。但要注意兼容性细节：
-
-webkit-appearance: none;和appearance: none;都得写，Safari 旧版本只认前者 - 去掉原生控件后，必须显式设置宽高，否则伪元素无处附着
-
::before通常用来画未选中态（空框），::after画选中态（对勾），两者都依赖position: absolute定位
示例关键片段：
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
position: relative;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
width: 100%; height: 100%;
border: 2px solid #999;
border-radius: 4px;
}
input[type="checkbox"]:not(:checked)::after {
display: none;
}
input[type="checkbox"]:checked::after {
content: "✓";
position: absolute;
font-size: 14px;
color: #2a75ff;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
:not(:checked) 的实际用途很窄，别高估它
它唯一可靠的作用，是触发「未选中时某兄弟元素的显示/样式变化」，比如控制文字颜色、禁用关联按钮、显示提示文案。但它不能直接美化复选框本身的未选中图形——那得靠伪元素 + 状态切换逻辑。
典型使用场景：
- 表单验证：未选中时让
label变红label > input:not(:checked) + span { color: #f33; } - 条件展示：未选中时显示「请勾选同意」提示
.agree-box input:not(:checked) ~ .hint { display: block; } - 禁用操作：未选中时让提交按钮
opacity: 0.5; pointer-events: none;
注意：:not(:checked) 不会触发重排，性能没问题，但别指望它替代视觉重建逻辑。
移动端点击区域和可访问性容易被忽略
隐藏原生控件后，如果只靠伪元素响应点击，手指点不准、屏幕阅读器无法识别是高频问题。
必须做到：
- 给
input设置width/height后，用margin或transform把它视觉上“移开”，但保留其在文档流中的位置和可聚焦性 - 确保父容器（如
label）包裹input，并设display: block，扩大可点击区域 - 加上
aria-label或关联for属性，否则 VoiceOver/Switch Control 会跳过这个控件
最简安全写法：<label><input type="checkbox" aria-label="我已阅读并同意"> 我已阅读并同意</label>，再配 CSS 隐藏 input 但不设 display: none 或 visibility: hidden。
真正在意可用性的话，:not(:checked) 只是样式链里最前端的一个判断，后面每一步漏掉，用户就卡在那儿了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
