2022年如何用CSS/条件语句定位Outlook.com网页版？

之前依赖的[owa]属性选择器、[class="x_foo"]精确类选择器，以及传统的MSO条件标签，在2022年后的Outlook网页版中已失效，以下是目前可行的定位技巧：

• 基于容器专属属性的选择器
  Outlook网页版会给邮件最外层容器添加data-outlook-cycle属性（部分版本可能为data-owa），可通过该属性嵌套定位目标元素：

[data-outlook-cycle] .foo {
  background-color: red !important;
}

• 模糊匹配前缀类名
  当前Outlook网页版仍会给自定义类名添加x_前缀，但不再是精确的单一类名，改用包含匹配选择器即可命中：

[class*="x_foo"] {
  background-color: red !important;
}

• 结合浏览器引擎的媒体查询
  利用Outlook网页版基于WebKit/Blink引擎的特性，使用特定媒体查询隔离样式，再配合属性选择器精准定位：

@media (min-width: 1px) and (-webkit-min-device-pixel-ratio: 0) {
  _::-webkit-full-page-media, _:future, :root [data-outlook-cycle] .foo {
    background-color: red !important;
  }
}

注意：传统的<!--[if mso]-->条件标签仅对桌面端Outlook客户端生效，对网页版无作用，无需再尝试。

内容的提问来源于stack exchange，提问作者Adrijen Ribić