nth-child、:first-of-type等选择器在邮件中失效，因outlook用word引擎不解析伪类，gmail服务端剥离含伪类的规则，apple mail白名单机制静默丢弃；须改用模板逻辑显式添加class如last-row、odd-row，并配合!important内联样式。
为什么 nth-child、:first-of-type 这类选择器在邮件里根本不起作用
不是你写错了，是 Outlook、Gmail、Apple Mail 这些客户端压根不解析它们。Outlook 用的是 MS Word 渲染引擎，连 CSS 选择器优先级都不支持；Gmail 服务端会直接剥离整个 <style></style> 块里含伪类的规则；Apple Mail 则走白名单机制，:nth-child() 不在名单里，静默丢弃。
替代方案：用模板逻辑显式标记关键元素
与其依赖客户端解析选择器，不如在 Django 模板或 Pandas Styler 渲染阶段，就把语义信息“写死”进 HTML 标签里：
- 给最后一行加
class="last-row"，而不是写tr:last-child - 给奇数行加
class="odd-row"，偶数行加class="even-row"，再配简短<style></style>规则 - 用
{% if forloop.last %}last-row{% endif %}或df.style.set_properties(**{'background-color': '...'})动态注入 class - 务必在
<style></style>中用!important（如.last-row { background-color: #f0f0f0 !important; }），Outlook 否则可能忽略
哪些 class 选择器能用，哪些一写就废
能用的只有最基础的：.class-name、#id；其他一律靠边站：
-
.parent .child（后代选择器）→ Outlook 和 Gmail 多数版本不认 -
.parent > .child（子选择器）→ 完全失效 -
[data-role="header"]（属性选择器）→ 被忽略，class 属性本身在部分 Outlook 版本中也会被剥离 -
.btn:hover（伪类）→ 邮件里没有 hover 行为，无意义
所有 class 名必须扁平、语义明确，比如 summary-row 比 table-body__row--last 可靠十倍。
内联样式 + 嵌入式 <style></style> 是底线，但别信自动工具全量转换
用 juice 或 CssToInlineStyles 转内联只是第一步。真正容易翻车的地方是：
- 工具没开
preserveImportant: true→ Outlook 会丢掉关键样式 - 转换后残留未处理的
class属性 → Outlook 直接跳过整行<tr class="odd-row"> <li> <code><style></style>里写了@media或display: flex→ Gmail 会整块过滤，连带后面合法样式也被砍掉 - 忘了给每个
<td> 加 <code>style="vertical-align: top;"→ Outlook 默认居中，表格挤成一团最终生成的 HTML 里，
应该只留一个带type="text/css"的<style></style>，且里面全是.class { prop: val !important; }这种最简形式；其余样式全部塞进style=""属性——没得商量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
