:checked仅适用于checkbox和radio，匹配被选中元素本身；:disabled匹配所有禁用表单元素，二者可组合使用，但需注意DOM结构与选择器关系。
用 :checked 选中复选框/单选按钮后改变样式
只有 <input type="checkbox"> 和 <input type="radio"> 支持 :checked，<select> 或 <textarea> 不行。它匹配的是当前被用户勾选（或通过 JS 设置 checked = true）的元素本身，不是它的父容器或兄弟元素——想影响旁边文字或包装盒，得靠相邻/子代选择器配合。
常见写法示例：
input[type="checkbox"]:checked + label {
color: #2c7be5;
font-weight: bold;
}
input[type="radio"]:checked ~ .control-indicator::after {
content: "●";
color: #2c7be5;
}
注意点：
-
:checked不触发重排，纯 CSS 实现，性能好 - 不能用在
<option>上（option:checked无效）；浏览器不支持该伪类作用于下拉项 - 如果 checkbox 是隐藏的（
display: none），:checked仍生效，但视觉上看不到变化——得确保关联的可见元素可被选择器捕获
用 :disabled 控制表单控件禁用态外观
:disabled 匹配所有设置了 disabled 属性的表单元素：input、button、select、textarea、optgroup、option。它不看 readonly，也不管是 HTML 属性还是 JS 动态设置的 disabled = true，只要 DOM 属性存在就命中。
立即学习“前端免费学习笔记（深入）”；
典型用法：
input:disabled,
select:disabled,
button:disabled {
background-color: #f8f9fa;
color: #6c757d;
cursor: not-allowed;
opacity: 0.7;
}
容易踩的坑：
-
fieldset:disabled会让整个字段组内所有可表单控件都进入禁用态，但:disabled伪类**不会**自动匹配这些“继承禁用”的子元素——必须显式写fieldset:disabled input才能样式生效 -
input[disabled]和input:disabled效果一样，但后者语义更准，且兼容性更好（IE9+） - 某些旧版 Safari 对
option:disabled的样式支持不稳定，建议用select:disabled option统一降级处理
:checked 和 :disabled 组合使用的边界情况
这两个伪类可以连用，比如 input:checked:disabled，表示“既被选中又被禁用”的复选框——常见于权限配置页中已分配但不可修改的选项。
但要注意逻辑顺序和浏览器行为：
-
input:disabled:checked和input:checked:disabled等价，顺序不影响匹配结果 - Chrome/Firefox 中，禁用的 radio 按钮即使被 JS 强行设为
checked = true，:checked:disabled依然能匹配；但部分移动端 WebView 可能忽略这种组合 - 不要依赖
:checked:disabled来隐藏控件——它只是样式层，DOM 状态仍存在，提交时该字段值照常发送（除非同时加了name移除或formdata过滤）
为什么有时候 :checked 样式不生效？
最常见原因是标签结构没对上。CSS 无法跨层级“反向影响”父元素，比如你想让整个 <div class="option"> 在内部 checkbox 被选中时变色，但没用 ~ 或 + 连接，也没把 checkbox 放在 label 里并用 for/id 关联，那就完全匹配不到。
自查清单：
- 确认 checkbox/radio 元素本身没有
display: none或visibility: hidden（否则无法触发用户交互，也就不会进入:checked） - 检查是否用了
label > input这类严格嵌套选择器，而实际 HTML 是label和input并列 - 确保没有更高优先级的规则（如内联 style 或
!important）覆盖了你的:checked样式 - 在 Shadow DOM 中，
:checked只作用于影子树内的元素，无法穿透到宿主或外部
真实项目里，最麻烦的往往不是语法写错，而是结构和语义没对齐——样式是 DOM 关系的镜像，关系断了，镜像就黑了。
