本文介绍如何使用现代 css 的 `accent-color` 属性，为动态生成的 angular 复选框（如座位选择场景）实现选中状态下的背景色变更，兼容主流浏览器且无需 javascript 干预。

在 Angular 应用中动态生成座位选择控件时，常需通过纯 CSS 实现复选框选中状态的视觉反馈（例如将已选座位高亮为绿色）。你当前使用的相邻兄弟选择器 .all-seats input:checked + label 逻辑本身正确，但存在两个关键限制：

1. <input> 和 <label> 在你的 generateSeats() 方法中是独立插入的 DOM 节点，并非严格意义上的相邻兄弟（中间可能因换行、空格或后续插入操作引入文本节点），导致 :checked + label 选择器失效；
2. 原生 <input type="checkbox"> 的背景色无法通过 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; /* 可选：移除焦点轮廓 */
}

⚠️ 注意事项：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

• 浏览器兼容性：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 即可实现专业级的选中反馈效果。