能，accent-color 可直接作用于表格内的 checkbox，但仅当其保持原生渲染；若失效，常见原因包括 appearance: none、父级遮盖、样式写在 label 上或 UI 库覆盖。
accent-color 能不能直接作用于表格里的 checkbox？
能，但和表格无关——accent-color 只认元素类型和渲染状态，不看它在 <table> 里还是 <div> 里。只要它是 input[type="checkbox"] 且保持原生渲染，就能生效。
为什么表格里写了 accent-color 却没变色？
常见干扰项比普通页面更集中，尤其容易踩这几个坑：
-
appearance: none被全局重置样式（比如 Tailwind 的appearance-none类）悄悄加在了表格内所有input上 → 原生结构消失，accent-color失效 - 表格行或单元格用了
background-color或border遮盖了 checkbox 的高亮区 → 颜色其实设对了，只是被盖住了 - 用
label包裹 checkbox 时，把accent-color写在了label上 → 属性不继承，必须写在input自身 - 某些 UI 库（如 Bootstrap、Ant Design）默认给表格内表单加了自定义样式层 → 实际渲染已脱离原生路径
怎么写才真正生效？
最稳妥的写法是显式、窄范围、绕过干扰：
/* 直接选中表格内的 checkbox，避免继承污染 */
table input[type="checkbox"] {
accent-color: #4f46e5;
}
<p>/<em> 或者用属性选择器锁定，更精准 </em>/
tbody tr td input[type="checkbox"] {
accent-color: var(--theme-accent, #3b82f6);
}注意两点：
立即学习“前端免费学习笔记（深入）”；
- 别用
td { accent-color: ... }—— 这个属性不继承，写了等于没写 - 如果用了 CSS 变量，确保
:root或上级作用域已定义，否则 fallback 不会自动触发（var(--x, red)中的red只在变量未声明时生效，不是兜底色）
不确定态（indeterminate）还是灰色？这是设计限制
表格里父子级 checkbox 常见的 indeterminate 状态，accent-color 完全不生效——这是浏览器规范强制行为，不是 bug。Chrome、Firefox、Safari 全部统一返回灰色。
真要改，只能用 JS 手动干预：
const box = document.querySelector('table input[type="checkbox"]');
box.indeterminate = true;
// 注意：仅改 background-color 会覆盖原生外观，建议配合透明边框+伪元素微调
box.style.backgroundColor = 'transparent';
box.style.color = '#4f46e5'; // 某些浏览器对 indeterminate 状态会响应 color但这属于 hack，稳定性差；真正可控的方案仍是放弃原生 indeterminate 渲染，换用自定义 checkbox 组件。
真正容易被忽略的是：表格本身不参与 accent-color 的任何逻辑，它只是容器——问题永远出在 checkbox 是否还走原生渲染路径，而不是它在哪一行哪一列。
