直接写 th { background: linear-gradient() } 不生效，因Layui表头th默认用background-color设纯色且权重高，而渐变需background简写属性覆盖；必须用高精度选择器（如.layui-table thead th）并加!important。
为什么直接写 th { background: linear-gradient() } 不生效
layui 的表头 th 元素默认带内联样式或高权重 class（如 .layui-table-th），且其背景是用 background-color 设置的；而 linear-gradient() 是 background 属性的值，不是 background-color 的值。只改 background-color 会完全忽略渐变声明。
- 必须使用
background简写属性，例如：background: linear-gradient(to right, #4facfe, #00f2fe); - 不能写成：
background-color: linear-gradient(...)—— 这语法错误，浏览器直接丢弃 - 如果 Layui 版本在 3.x 且用了
!important覆盖默认色，你 CSS 里也得加!important才能抢赢（虽不推荐，但实操中绕不开） - 选择器权重不够也会失效：只写
th或.layui-table th常被.layui-table thead th盖掉，得写够精度
怎么写 CSS 才能稳定覆盖表头背景渐变
最稳妥的选择器是：.layui-table thead th，配合 background + !important。若表格容器有 ID（比如 id="userTable"），可进一步提权：#userTable .layui-table thead th，避免污染全局。
- 示例（从左到右蓝青渐变）：
#userTable .layui-table thead th { background: linear-gradient(to right, #4facfe, #00f2fe) !important; } - 别漏掉文字颜色适配：渐变常偏亮，文字建议同步设为深色，比如
color: #333 !important; - 如果只要某列有渐变，用
:nth-child(n)，例如第 3 列：.layui-table thead th:nth-child(3) - IE11 及部分旧安卓 WebView 不支持
to right写法，可降级为90deg，但注意兼容性取舍
设置后发现渐变“断层”或只显示一半
这通常是因为 Layui 在固定列（fixed: 'left' 或 fixed: 'right'）场景下，会把表头拆成多个独立 <thead> 块（主表头 + 左/右固定表头）。你写的 CSS 只命中了主表头，固定列的表头没被覆盖。
<ul>
<li>必须同时匹配所有可能的表头容器：<pre class="brush:php;toolbar:false;">.layui-table thead th,
.layui-table-fixed-l thead th,
.layui-table-fixed-r thead th {
background: linear-gradient(to right, #4facfe, #00f2fe) !important;
}</pre>
</li>
<li>检查 DOM 结构：打开开发者工具，搜索 <code><thead>，看是否出现多个（尤其启用 <code>fixed 或 height 后）
th 通常还带 .layui-table-patch 类，必要时也加上：.layui-table-patch th
渐变和 hover、选中态冲突怎么办
Layui 默认对表头 th 没有 hover 样式，但如果你后续加了排序箭头（sort: true），点击时会临时加 .layui-table-sort 类，某些主题下可能触发背景重绘，导致渐变闪烁或消失。
- 显式重置排序态背景：
.layui-table thead th.layui-table-sort, .layui-table thead th.layui-table-sort:hover { background: linear-gradient(to right, #4facfe, #00f2fe) !important; } - 如果用了自定义排序图标（比如 Font Awesome），确保图标颜色与渐变协调，必要时用
filter: brightness()微调 - 移动端点击反馈（tap highlight）有时会短暂覆盖背景，可加
-webkit-tap-highlight-color: transparent;抑制
thead —— 大多数人只改了主表头，上线后在有固定列的页面发现渐变“失踪”，翻半天控制台才看到另一份 thead 在隔壁 DOM 树里躺着。
