
outlook 对 css 支持极弱,不识别 :nth-child()、相邻兄弟选择器等现代伪类和组合器;唯一可靠方案是为最后一行显式添加 html class,并通过纯 class 选择器定义样式。
在构建 HTML 邮件(尤其是需兼容 Microsoft Outlook)时,CSS 兼容性是核心挑战。Outlook 沿用旧版 Word 渲染引擎(而非 WebKit 或 Blink),其 CSS 支持极为有限——根据 Mailchimp 邮件客户端 CSS 支持表,Outlook 完全不支持以下关键特性:
- 伪类选择器:tr:last-child、tr:nth-child(n)、:first-of-type 等
- 组合器:+(相邻兄弟)、~(通用兄弟)、>(子选择器)均不可靠或完全失效
- 属性选择器(如 [data-last])及自定义数据属性亦不被识别
✅ 正确做法:服务端/模板层主动标记最后一行
在生成 HTML 表格时,动态为
| Row 1 |
| Row 2 |
| Row 3 |
| ✅ This is the last row |
⚠️ 注意事项:
- 务必使用 !important:Outlook 可能覆盖内联样式,强制声明可提升可靠性;
- 避免嵌套 class 或复杂结构:如 .table-wrapper .last-row 在 Outlook 中可能失效,推荐扁平化命名(如 footer-row, summary-row);
- 禁用外部样式表与 :邮件客户端普遍屏蔽外部 CSS,所有样式必须内联或置于
- 避免嵌套 class 或复杂结构:如 .table-wrapper .last-row 在 Outlook 中可能失效,推荐扁平化命名(如 footer-row, summary-row);










