如何仅为WordPress单个页面的Gutenberg表格自定义表头样式

故障排查与解决方法 #

不生效的核心原因 #

• 古腾堡表格块的「附加CSS类」会绑定在表格外层的<figure>容器标签上，而非直接作用于<table>标签本身。你原本写的.blue-header thead选择器层级和实际DOM结构不匹配，因此无法命中目标元素。
• 若样式代码添加到独立主题样式表，还可能存在加载顺序晚于WordPress默认表格样式、优先级不足被覆盖的问题。

正确操作步骤 #

1. 修正自定义CSS代码，适配古腾堡的DOM结构：

.blue-header table thead {
    background-color: #030363 !important;
    color: #ffffff !important;
}

加入!important是为了强制覆盖古腾堡自带的默认表格样式，避免优先级不足的问题。
2. 将修正后的CSS添加到「外观>自定义>额外CSS」或者主题的style.css样式表文件中，保存后清空站点缓存。
3. 打开目标页面的古腾堡编辑器，选中需要自定义样式的表格块，在右侧设置栏「高级>附加CSS类」输入框填入blue-header（无需加类名前的点，你之前的填写内容是正确的），更新页面即可。

该方案不会影响站点内其他表格的样式，同时保留表格的可视化编辑能力，客户可正常在编辑器中修改表格内容。

内容的提问来源于stack exchange，提问作者Roberto Raymon