Gmail的TD元素中无法应用自定义CSS类吗？HTML邮件多端兼容问题求解

优先推荐方案：父级继承基础样式+内联特殊样式 #

• 把你已验证全平台生效的conttext类从span迁移到父级td元素上，利用CSS继承特性，td下所有文本默认继承字体、字号等基础属性，无需给每个子span单独加conttext类
• 需要特殊样式的文本直接加内联样式即可，不会丢失父级继承的基础属性，改造后代码示例如下：

<td class="conttext">
  <span><br>
  Some text <strong>some strong text</strong> mit <strong>some strong text</strong> some text<br>
  <br>
  Some text <br>
  </span>
  <span style="color: #0000FF; font-weight: bold;">This text is formatted correctly in all clients</span><br>
</td>

该方案完全不影响头部定义的媒体查询功能，也不需要大规模修改原有结构，适配成本最低。

备选方案1：头部CSS双选择器兜底 #

如果不想修改现有结构，可在头部CSS定义时，同时写类选择器和属性选择器，适配Gmail的样式解析规则：

/* 原有类选择器保留，新增属性选择器写法 */
.conttext, [class*="conttext"] {
  /* 原有的字体、字号等基础样式 */
}
.conttextboldblue, [class*="conttextboldblue"] {
  color: #0000FF;
  font-weight: bold;
}

安卓Gmail对属性选择器的支持度远高于普通类选择器，这种写法可以保留原有类调用逻辑，不需要额外添加内联样式。

备选方案2：双层span嵌套 #

如果既不能修改父级td的类，也不想调整头部CSS，可对需要特殊样式的文本做双层嵌套：

<span class="conttext"><span style="color: #0000FF; font-weight: bold;">需要蓝粗样式的文本</span></span>

外层span保留conttext类保证Outlook、iOS端的基础样式，内层内联样式保证Gmail端的特殊样式生效。

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