如何避免深色主题破坏HTML邮件中的CSS样式？

HTML邮件的样式兼容性一直是个棘手问题，像Gmail这类客户端会过滤掉很多常规CSS写法，导致你设置的背景色、文字颜色等样式无法正常生效。下面是几个实用的解决办法：

• 强制使用内联样式
  别依赖<style>标签或者外部样式表，Gmail会直接忽略这些内容。把所有样式都写在元素的style属性里，比如：

  <div style="background-color: #2c3e50;">
    <p style="color: #ffffff;">这是白色文字内容</p>
  </div>
  

• 添加HTML原生属性作为兜底
  对于背景色、文字颜色这类基础样式，可以同时搭配HTML原生属性（比如bgcolor、color），即使内联样式被过滤，这些属性也能生效：

  <div style="background-color: #2c3e50;" bgcolor="#2c3e50">
    <p style="color: #ffffff;" color="#ffffff">这是白色文字内容</p>
  </div>
  

• 放弃复杂CSS选择器
  类选择器、ID选择器、后代选择器在邮件客户端里基本不起作用，别写.card p这类代码，直接给每个目标元素单独添加内联样式。

• 多客户端测试验证
  写完邮件后一定要在Gmail、Outlook、Apple Mail这些主流客户端里预览效果，很多邮件工具自带跨客户端测试功能，能帮你提前发现兼容性问题。

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