直接写 input[type="checkbox"]:checked 可精准匹配用户勾选的原生复选框，对 radio 有效，但对 JS 模拟的伪复选框无效；须限定类型防误匹配，支持常规样式与伪元素，但无法影响父级或前序兄弟元素。
怎么用 :checked 选中已勾选的复选框
直接写 input[type="checkbox"]:checked 就能匹配当前被用户勾选的复选框元素。它只作用于原生 <input type="checkbox">，对 <input type="radio"> 同样有效，但对自定义封装的“伪复选框”（比如用 <div> + JS 模拟的）完全无效。
<p>常见错误是写成 <code>input:checked —— 这会同时命中 checkbox、radio、甚至未来可能支持 :checked 的其他类型（如 <option></option>），容易误伤。明确限定类型更安全。
:checked 能做什么样式？不能做什么
它可以触发颜色、背景、边框、display、opacity 等常规样式变化，也能配合 ::before/::after 生成内容（比如打钩图标）。但无法修改父元素或前一个兄弟元素——CSS 选择器没有“向上选”或“向前选”的能力。
常见翻车场景：
立即学习“前端免费学习笔记（深入）”；
- 想让勾选后，旁边的
<label></label>变色 → 必须把<input>放在<label></label>内部，或用label[for="id"]关联，并借助input:checked + label（注意是“相邻兄弟”，不是任意兄弟） - 想隐藏整个表单项 → 可以用
input:checked ~ .form-item（前提是结构允许“后续兄弟”匹配） - 试图用
:checked触发动画过渡（如transform）→ 需确保目标属性本身支持过渡，且初始状态有定义
和 JavaScript 的 checked 属性有什么区别
CSS 的 :checked 只响应用户交互导致的状态变更，不响应 JS 直接赋值（比如 el.checked = true）—— 这个操作不会触发重绘，除非手动 el.click() 或触发一次 layout 强制刷新。
这意味着：
- 如果用 JS 初始化表单（比如从 localStorage 恢复选中状态），仅设
checked属性，:checked样式不会生效 - 必须同步调用
el.setAttribute('checked', '')或el.click()（后者更可靠） - React/Vue 等框架中，受控组件的
checked值由 state 驱动，但 DOM 属性更新时机可能滞后，:checked样式偶尔会“闪一下”
兼容性和性能要注意什么
:checked 在所有现代浏览器中都支持（IE9+），但旧版 Safari（≤5.1）和 Android Browser（≤4.3）不支持伪类组合选择器（如 input[type="checkbox"]:checked），只认 input:checked。
性能上它本身开销极小，但滥用“祖先选择器”会拖慢渲染，比如：form :checked 会让浏览器每次状态变更都遍历整个表单树。建议始终用最具体的选择器，比如 .settings-form input[type="checkbox"]:checked。
真正容易被忽略的是：当复选框被 display: none 或 visibility: hidden 时，:checked 依然匹配，但你根本看不到效果——这时候得检查是否误加了隐藏规则，或者该换用 opacity: 0 配合 pointer-events。
