如何不修改Elementor的frontend-lite.min.css文件移除指定CSS样式

• 方案1：高优先级CSS强制重置
  你之前自定义width属性不生效，大概率是选择器优先级低于Elementor自带的样式规则。使用以下写法可以覆盖原有width: 100%规则，实际效果和删除该行完全一致：

  /* 可以放在WordPress后台→外观→自定义→额外CSS中，无需修改插件源文件 */
  body .elementor iframe {
    width: revert !important;
    /* 若需要指定固定宽度，直接替换为你需要的width值即可，保留!important标识 */
  }
  

  该写法优先级远高于Elementor默认的.elementor iframe规则，不会被插件自带样式覆盖。

• 方案2：PHP钩子过滤Elementor CSS输出
  如果你需要直接从样式输出中移除该规则，可以通过WordPress钩子动态过滤Elementor的前端CSS内容：
  将以下代码添加到当前主题的functions.php文件，或者自定义代码片段插件中：

  add_filter( 'elementor/frontend/print_styles', function( $css ) {
    // 替换内容需和压缩后的frontend-lite.min.css实际格式匹配，可根据自己站点的压缩结果调整字符串
    return str_replace( '.elementor iframe{width:100%;margin:0;}', '.elementor iframe{margin:0;}', $css );
  } );
  

• 方案3：JS动态移除样式表规则
  上述方案都不适用的情况下，可以用前端JS遍历样式表，直接删除对应width属性：

  // 可以放在WordPress后台自定义的页脚脚本位置
  document.addEventListener('DOMContentLoaded', function() {
    for (const sheet of document.styleSheets) {
      try {
        for (let i = 0; i < sheet.cssRules.length; i++) {
          const rule = sheet.cssRules[i];
          if (rule.selectorText === '.elementor iframe' && rule.style.width === '100%') {
            rule.style.removeProperty('width');
          }
        }
      } catch (err) {}
    }
  });
  

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