Gmail iOS端HTML邮件使用子代选择器致style标签被移除求解

方案1：替代子代选择器实现同等效果（最优解） #

Gmail iOS端的CSS解析器会将包含子代选择器>的所有style块全部移除，目前没有办法让Gmail原生支持>选择器，可通过以下方式实现等效的高特异性选择效果，不会触发style块被删除：

• 给目标直接子元素添加专属类名，直接用类选择器写样式规则。比如原规则.breaking-class > a，可给该a标签添加类名breaking-class-direct-link，替换为.breaking-class-direct-link规则即可，优先级和原子代选择器一致。
• 若无法修改元素类名，可将子代选择器替换为后代选择器.breaking-class a，如果存在深层嵌套的a标签需要避免样式污染，可单独给深层a标签写更高优先级的样式规则做覆盖。

调整后的style块不会触发Gmail的过滤逻辑，你示例中的.some-class移动端绿色样式也可以正常生效。

方案2：隔离不兼容规则避免所有样式失效 #

如果必须保留子代选择器给其他邮件客户端使用，可通过以下方式避免Gmail下所有样式被移除：

• 所有Gmail端需要生效的核心样式全部做内联处理，不要依赖head中的style标签。比如你示例中的.some-class移动端绿色规则，可在保留内联基础样式的同时配合类选择器做响应式覆盖，就算head的style被全部删除，基础展示效果也不会受影响。
• 含有>等Gmail不支持选择器的规则，单独放在body标签末尾的style块中，部分版本Gmail iOS仅会扫描head中的style块做过滤，body内的style块触发全量删除的概率更低。
• 核心通用样式和不兼容的特殊样式完全拆分，通用样式单独放在最顶部的style块，特殊样式放在独立的style块，并且用非Gmail客户端识别的条件注释包裹，避免被Gmail的解析器扫描到。

补充注意事项 #

• 不要在同一个style块内混合Gmail兼容和不兼容的CSS规则，会提升整个块被删除的风险
• 涉及响应式的核心样式，优先用类选择器实现，避免使用复杂的组合选择器
• 尽量降低对head中style标签的依赖，核心展示样式优先内联，适配不同邮件客户端的容错性更高

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