Power Automate发送邮件时td:nth-child(1) CSS样式不生效问题排查

问题场景 #

我用下面的CSS代码在网页测试编辑器里能正常让表格第一列变红，但通过Power Automate发邮件后，邮件里从来没显示这个红色样式：

Table {
    font-family: Arial;
    background-color: #EEEEEE. /* 这里是语法错误：应该用分号，不是点号 */
    border-collapse: collapse;
    width: 100%;
    }

Table td, Table th {
    border: 1px solid #ddd;
    padding: 1px 3px;
    }

Table th {
    font-size: 12px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    background-color: #1C6EA4;
    color: white;
    }

Table tr td:nth-child(1) { 
    color: #ff0000; 
    }

问题原因 #

• 语法错误：background-color: #EEEEEE.末尾用了点号而非分号，浏览器会容错，但邮件客户端对语法错误更敏感，可能导致后续样式解析失败。
• 选择器兼容性问题：nth-child(1)属于CSS3高级选择器，绝大多数邮件客户端（比如Outlook系列）不支持这类选择器，所以第一列变红的规则不会被执行。
• 样式加载方式：邮件客户端普遍对<style>标签内的内部样式支持有限，很多会直接忽略这部分代码。

解决方案 #

• 先修复语法错误，把点号改成分号：background-color: #EEEEEE;
• 放弃高级选择器，改用内联样式直接给第一列的每个单元格设置颜色，比如：

<tr>
    <td style="color: #ff0000;">第一列内容</td>
    <td>其他列内容</td>
</tr>

• 所有表格样式尽量都用内联方式写，比如表头背景色、边框等，避免依赖内部样式表：

<th style="font-size: 12px; font-weight: bold; padding-top: 10px; padding-bottom: 10px; text-align: left; background-color: #1C6EA4; color: white; border: 1px solid #ddd;">表头</th>

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