WordPress Avada主题自定义CSS桌面生效移动端失效问题求助

1 修复错误的CSS类名 #

你当前写的.test 1选择器存在语法错误：CSS选择器中的空格代表后代选择器，该写法的实际含义是匹配类名为test的元素内部的<1>标签，而<1>属于不存在的非法HTML标签，正常情况下全端都不会生效。桌面端能生效大概率是缓存残留或者元素类名意外匹配导致的偶发现象。
将类名中的空格替换为连字符/下划线，同时同步修改对应元素的class属性即可，示例正确写法：

.test-1 {
    background: radial-gradient(ellipse at center, #eff1ff 10%, #000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}

2 处理Avada主题移动端样式优先级覆盖 #

Avada主题自带的响应式样式规则优先级通常高于自定义CSS，你可以给属性添加!important提升优先级，避免被移动端默认规则覆盖：

.test-1 {
    background: radial-gradient(ellipse at center, #eff1ff 10%, #000 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif !important;
}

3 彻底清空缓存验证生效状态 #

修改完代码后需要依次清空三类缓存，避免移动端读取旧的样式文件：

• 清空Avada主题自带缓存：进入Avada选项面板→性能设置，清空主题生成的CSS/JS缓存
• 清空WordPress站点缓存：如果你安装了WP Rocket、WP Super Cache之类的缓存插件，清空全站缓存
• 清空移动端浏览器缓存：可以直接用移动端隐私/无痕模式访问站点验证效果

4 兼容问题排查 #

如果你修改后还是有部分移动端设备不生效，检查目标元素的父元素是否设置了overflow: hidden、z-index异常之类的属性，这类属性会导致-webkit-background-clip: text的渐变文字效果失效。

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