如何在WordPress中修改element.style {}适配GridBuilder组件并更改文字颜色

1. 定位准确的CSS选择器 #

先在浏览器控制台（F12）里找到目标盒子的具体类名/ID，比如你在控制台修改的元素对应的类是.grid-builder-box，里面的文字元素类是.box-text——别直接用element.style，要抓元素本身的专属选择器。

2. 提升样式优先级（核心解决方法） #

WordPress或GridBuilder编辑器里加的CSS无效，大多是因为优先级比插件默认样式低，试试这两种写法：

• 用更具体的嵌套选择器（推荐，尽量不用!important）：

  .grid-builder-wrapper .grid-builder-box .box-text {
    color: #ffffff;
  }
  

• 要是还是被覆盖，加!important强制生效：

  .grid-builder-box .box-text {
    color: #ffffff !important;
  }
  

  注意：把上面的类名换成你实际找到的元素类名，别直接抄。

3. 正确添加CSS的位置 #

别在GridBuilder编辑器里加，直接去WordPress后台的「外观→自定义→额外CSS」里粘贴代码，这里的样式优先级比插件内置编辑器的高，不容易被覆盖。

4. 清空缓存 #

修改后一定要清空WordPress的缓存插件（比如WP Rocket、W3 Total Cache）缓存，再按Ctrl+Shift+R强制刷新浏览器，不然可能还是显示旧样式。

5. 临时应急方案 #

如果以上都不行，在GridBuilder编辑器里找到目标盒子的设置项，看有没有「自定义内联样式」的输入框，直接填：

style="color: #ffffff;"

这和你在控制台改的效果完全一致，不会被其他样式干扰。

内容的提问来源于stack exchange，提问作者Abigaël Pinheiro