本文介绍如何使用现代 css 的 `accent-color` 属性，为动态生成的 angular 复选框（如座位选择场景）实现选中状态下的背景色变更，兼容主流浏览器且无需 javascript 干预。
在 Angular 应用中动态生成座位选择控件时，常需通过纯 CSS 实现复选框选中状态的视觉反馈（例如将已选座位高亮为绿色）。你当前使用的相邻兄弟选择器 .all-seats input:checked + label 逻辑本身正确，但存在两个关键限制：
- 和
- 原生 的背景色无法通过 background-color 直接修改——它默认渲染为系统主题控件，其“填充色”需通过 accent-color 控制。
✅ 推荐解决方案：使用 accent-color（CSS Level 4 标准）
该属性专为单选框（radio）和复选框（checkbox）设计，可直接设置选中状态下的强调色（即勾选标记/圆点的填充色），语法简洁、语义明确，且天然支持动态插入的元素：
.all-seats input[type="checkbox"]:checked {
accent-color: rgb(28, 185, 120); /* ✅ 绿色强调色 */
outline: none; /* 可选：移除焦点轮廓 */
}⚠️ 注意事项：
- 浏览器兼容性：accent-color 已被 Chrome 93+、Edge 93+、Firefox 92+、Safari 15.4+ 原生支持（caniuse.com/accent-color）。若需支持更老版本（如旧版 Safari），可搭配 -webkit-appearance: none + 自定义伪元素方案，但会显著增加复杂度；
- Angular 绑定建议：虽然当前用 insertAdjacentHTML 动态生成 DOM 可行，但更符合 Angular 框架规范的做法是使用 *ngFor 结合 [(ngModel)] 或响应式表单管理座位状态，便于统一控制样式与逻辑；
- 无障碍考量：accent-color 不影响屏幕阅读器行为，仍需确保 label 正确关联 for 属性（你已正确使用 for="sX"），以保障可访问性。
? 总结：优先采用 accent-color 替代复杂的标签模拟方案。它轻量、标准、可靠，完美适配你通过 TypeScript 动态生成的座位复选框，一行 CSS 即可实现专业级的选中反馈效果。
