WordPress站点H1标签内联CSS设置!important仍不生效问题

问题根源 #

1. WordPress自带的自动段落格式化功能（wpautop）会自动修正不符合HTML规范的结构：你将块级元素h1嵌入在p标签内，触发了自动拆分逻辑，所以渲染后h1被单独拆出来，前后各生成了独立的p标签，破坏了你原本的混排结构。
2. 渲染后的h1带有fittexted_for_content_h1类，说明你的站点安装了FitText类响应式字体插件/主题自带了标题自适应功能，这类工具会在前端加载时动态覆盖h1的内联font-size属性，甚至清除你设置的!important规则，替换为脚本计算出来的自适应字号，导致你的字体大小设置失效。

解决步骤 #

1. 规避自动格式化拆分
   如果你使用古腾堡编辑器，直接插入「自定义HTML」块来编写这段代码，不要使用普通段落块编辑；如果使用经典编辑器，可安装TinyMCE Advanced插件关闭自动p标签生成功能，或者在当前主题functions.php中添加代码关闭指定页面的wpautop逻辑。
   另外建议把外层的p标签替换为div，避免不符合HTML嵌套规则触发自动修正，代码示例：

<div>test <h1 style="display:inline !important; font-size:18px !important;">Beyond Reasonable Doubt and the Rush to Judgement</h1> test</div>

2. 解决FitText动态覆盖样式问题

• 先排查站点安装的插件，找到标题自适应、响应式字体相关的插件，在插件设置中添加排除规则，跳过对该特殊h1的样式修改；
• 如果是主题自带的自适应功能，可给该h1添加自定义类比如no-fittext，然后在「外观-自定义-额外CSS」中添加如下规则，优先级高于脚本动态注入的内联样式：

.no-fittext {
  font-size: 18px !important;
  display: inline !important;
}

添加后对应的h1代码修改为：

<div>test <h1 class="no-fittext">Beyond Reasonable Doubt and the Rush to Judgement</h1> test</div>

即可实现你需要的混排效果。

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