accent-color 只对原生 input[type="checkbox"] 元素直接生效，不继承、不穿透父级，表格元素或其子容器设置无效；需显式选择复选框并避免 appearance: none；indeterminate 状态不受 accent-color 控制，需用 box-shadow 等方式补位。
accent-color 不能用于 HTML 表格本身，也不能通过给 table、td 或 tr 设置来影响内部复选框——它只对原生 input[type="checkbox"] 元素本身生效，且必须直接作用于该元素。
为什么给表格加 accent-color 没反应
常见误解是把表格当“容器”来统一染色。但 accent-color 不继承，也不穿透父级作用域：
✅ 正确写法：直接选中复选框，如 td input[type="checkbox"] { accent-color: #3b82f6; }
❌ 无效写法：table { accent-color: #3b82f6; } 或 td { accent-color: #3b82f6; } —— 浏览器直接忽略
input[type="checkbox"] 在表格里怎么写才生效
表格中复选框仍是普通表单控件，生效条件没变，但容易因嵌套结构漏掉选择器：
- 必须显式写出目标元素，比如
tbody input[type="checkbox"]或.data-row input[type="checkbox"] - 如果用了
appearance: none（常见于自定义样式），accent-color立即失效 —— 原生强调区被移除 - 避免用
label包裹却只给label写样式；accent-color不作用于label，只作用于input - 若表格有 JS 动态插入行，确保新插入的
input也匹配到对应 CSS 规则（比如用属性选择器而非 class）
表格场景下 indeterminate 状态颜色怎么处理
表格常用于多选/父子级批量操作，indeterminate 状态极易出现，而 accent-color 对其完全无效：
立即学习“前端免费学习笔记（深入）”；
- 浏览器强制渲染为灰色，不是 bug，是当前规范限制（Chrome 102+、Firefox 92+、Safari 15.4+ 均如此）
- JS 补位时别直接设
backgroundColor，否则会盖住原生勾或边框；推荐用box-shadow模拟强调色，例如：checkbox.style.boxShadow = 'inset 0 0 0 2px #3b82f6'; - 务必在设置
indeterminate = true后立即执行样式补位，且在checked变更时清除该样式，避免状态错乱
真正容易被忽略的是：表格里一个 input[type="checkbox"] 的视觉表现，其实由三部分组成——未选中边框、选中填充色（accent-color 控制）、不确定状态（accent-color 完全不管）。想统一体验，得把这三块拆开处理，而不是指望一行 CSS 解决全部。
