可以，:checked伪类对单选和复选框均有效；需用组合选择器如input[type="radio"]:checked, input[type="checkbox"]:checked统一控制样式，并确保label与input正确关联以触发状态更新。
伪类 :checked 能否同时控制单选和复选框的样式？
可以，但必须注意：单选框（<input type="radio">）和复选框（<input type="checkbox">）在 DOM 中是完全独立的元素类型，:checked 伪类对二者都有效，但它们的「状态切换逻辑」不同——单选组内只能有一个 :checked，而复选框可多选。样式统一的关键不在于“强行让它们行为一致”，而在于用同一套 CSS 规则响应各自独立的 :checked 状态。
如何用同一套 CSS 选择器匹配 radio 和 checkbox 的 :checked 状态？
直接组合选择器即可，不需要 JS 干预。只要结构合理，CSS 可以无差别地作用于两类元素：
- 用逗号分隔选择器：
input[type="radio"]:checked, input[type="checkbox"]:checked - 若已加自定义 class（推荐），如
class="form-control"，可写成：.form-control[type="radio"]:checked, .form-control[type="checkbox"]:checked - 避免写成
input:checked——太宽泛，可能误中其他类型（如type="option"不存在，但未来扩展或第三方组件可能引入非预期的checked元素）
为什么自定义样式时经常出现「点击没反应」或「样式不更新」？
根本原因通常是隐藏原生控件后，未正确绑定点击区域与输入框的关联关系。浏览器只响应对 <input> 元素本身的交互（或其显式关联的 <label></label>），而不是你画的伪元素。
- 必须确保每个
input都有对应的<label for="xxx"></label>，且for值与input的id严格一致 - 或者将
input直接包裹在<label></label>内（此时无需for和id） - 常见错误：用
display: none或visibility: hidden隐藏input后，又没给label设置cursor: pointer或足够点击区域，导致用户感知不到可点 -
:checked是实时同步的——只要原生控件状态变了（哪怕 JS 修改了input.checked = true），样式立即生效；但前提是该input没被移出文档流或 disabled
一个最小可用的统一样式示例（支持 radio 和 checkbox）
/* 隐藏原生控件 */
input[type="radio"],
input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
<p>/<em> 自定义外观（未选中） </em>/
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 6px;
vertical-align: middle;
border: 2px solid #999;
border-radius: 4px;
}</p><p>/<em> radio 圆点、checkbox 对勾 </em>/
input[type="radio"]:checked + label::after,
input[type="checkbox"]:checked + label::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-left: 4px;
margin-top: 4px;
vertical-align: top;
}</p><p>input[type="radio"]:checked + label::after {
border-radius: 50%;
background: #007bff;
}</p><p>input[type="checkbox"]:checked + label::after {
background: url("data:image/svg+xml,%3Csvg xmlns='<a href="https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6">https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6</a>' viewBox='0 0 24 24'%3E%3Cpath fill='%23007bff' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
background-size: contain;
}注意：这个例子依赖 input + label 相邻兄弟结构。如果 HTML 是 <label><input><span>文本</span></label>，就要改用 label > input:checked + span::before 这类更精确的定位方式。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：当页面通过 JS 动态插入新选项时，必须确保新 input 也带上了正确的 id 和对应 label 关联，否则 :checked 样式不会触发——伪类不依赖 JS，但它依赖 DOM 结构完整且可交互。
