不生效。Layui 2.8 表格未使用 CSS 自定义属性，--layui-table-bg 等变量在源码中不存在且无引用；样式由基础类、动态注入 style 和内联 style 三层叠加控制，需用高优先级选择器（如加 !important）覆盖。

直接修改 --layui-table-bg 等 CSS 变量是否生效？

不生效。layui 2.8 的 table 组件**未使用 css 自定义属性（css variables）驱动样式**，所谓“全局 css 变量”是社区误传或对 element ui/ant design 等组件库的混淆。layui 的表格样式全部由静态类名和内联 style 控制，:root 中定义的 --xxx 变量（如 --layui-table-bg）在源码中并不存在，也不被任何 css 规则引用。

真正起作用的是哪些 CSS 类和内联 style？

Layui 表格的视觉表现由三部分叠加决定：基础 CSS 类（来自 layui.css）、动态插入的 片段（含列宽、冻结列偏移等）、以及部分单元格的 style="background-color: ..." 内联样式（如斑马纹、选中态）。修改时必须覆盖这三层：

• .layui-table、.layui-table tr:hover、.layui-table-hover 等基础类控制默认状态
• 列宽相关样式由 JS 动态注入到 中的 ，需用更高优先级选择器覆盖（如加 !important 或用 .layui-table > tbody > tr > td）
• 斑马纹颜色由 JS 在渲染时写入 style 属性，例如 ，必须用属性选择器覆盖：.layui-table tbody tr[style*="background-color"]

  安全可靠的重写方式（不改源码、不破坏响应式）

  推荐在页面 中追加一段 ，用足够具体的选择器覆盖关键样式，避免影响其他模块：

  <style>
  /* 修改表头背景与文字色 */
  .layui-table thead th {
    background-color: #4a9ff5 !important;
    color: #fff !important;
  }
  <p>/<em> 覆盖斑马纹（含 hover 和选中态） /
  .layui-table tbody tr:nth-child(odd) td,
  .layui-table tbody tr[style*="background-color"] td {
  background-color: #f8fbff !important;
  }
  .layui-table-hover,
  .layui-table-click {
  background-color: #e6f7ff !important;
  }<p>/<em> 统一边框色（避免深色主题下边框消失） /
  .layui-table, .layui-table th, .layui-table td {
  border-color: #d0e4f7 !important;
  }
  </style>

  注意：!important 在此处必要，因为 Layui 的内联 style 和动态 优先级高于普通类；但不要滥用——仅用于明确要覆盖的属性，否则后续调试困难。

  为什么不能用 JS 动态改 document.documentElement.style.setProperty？

  因为 Layui 2.8 根本没读取这些变量。执行 document.documentElement.style.setProperty('--layui-table-bg', '#ff0') 后，没有任何样式变化，DOM 中也找不到对应变量的消费逻辑。强行绑定变量到元素上（如 el.style.backgroundColor = 'var(--layui-table-bg)'）会因变量未定义而回退到初始值，且破坏 Layui 自身的 hover/选中逻辑。

  真正需要深度定制的场景（比如暗色模式切换），应监听主题变更事件，然后批量调用 $('.layui-table').addClass('layui-table-dark') 并配以独立 CSS 规则，而不是寄希望于未实现的 CSS 变量机制。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！