好问题。
MJML 和 HTML 是标记语言。MJML 完全依赖 HTML 和 CSS 来实现浏览器效果。也就是说，MJML 程序将 MJML 标记翻译成 HTML 和 CSS。浏览器只获取 HTML 和 CSS。
如果我们将自己限制为电子邮件客户端（Gmail 等）支持的 HTML 和 CSS 结构，我们可以获得良好的电子邮件结果。这很难。MJML 有帮助。
在 HTML 中，我们可以通过 CSS 与 DOM 对象进行交互，有时使用class. 我们可以attributes在课堂内外使用 。
同样，在 MJML 中，我们可以通过 MJMLattributes和 MJML 概念与 MJML 组件进行交互mj-class。我们可以在 es 内外使用 MJML 属性mj-class。
MJMLmj-style组件支持指定 MJML 在 HTML 中包含的 CSS 代码。也就是说，标签内的mj-style代码是 CSS，而不是 HTML 或 MJML。所有语法、应用程序规则和效果仅来自 CSS 和 HTML。
电子邮件作者可以将 MJML 属性应用mj-class到 MJML 组件，而不是 HTML 元素。MJML 将 MJML 标记翻译成 HTML，但电子邮件作者必须依赖于该翻译过程。
考虑这个 MJML 脚本。
<mjml>
<mj-head>
<mj-attributes>
<mj-class name="mjclass" color="green" font-size="30px" />
</mj-attributes>
<mj-style inline="inline">
.blue-text div {
color: blue !important;
}
</mj-style>
<mj-style>
.red-text div {
color: red !important;
text-decoration: underline !important;
}
</mj-style>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text css-class="red-text" font-style="italic">
I'm red and underlined
</mj-text>
<mj-text css-class="blue-text">I'm blue because of inline</mj-text>
<mj-text mj-class="mjclass">I'm green</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
这是来自MJML 文档的代码 （几乎，见下文）。让我们研究一下。
https://mjml.io/try-it-live/jecmNRR-jzO你可能会发现这个 URL 很有用——我希望它至少在一个月内不会过时。在那里，您将看到上述脚本及其浏览器渲染。我将解释如何查看 HTML 标记。我将在下面使用该 URL。
主要用于其他人或以后的读者：如果您无法使用 URL 并希望重新创建以下内容，也许您可以将上述代码复制并粘贴到https://mjml.io/try-it-live . 否则，您将需要访问 MJML 程序以及 MJML 和 HTML 文件。MJML 介绍页面位于https://mjml.io/。MJML 作为 NodeJS (NPM) 模块工作。社区提供桌面应用程序。MJML 团队支持 VS Code 插件。https://mjml.slack.com/上有很多实时问答（注册：https ://join.slack.com/t/mjml/shared_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg ）。
在 MJML 中，让我们看看这个元素
<mj-text css-class="red-text" font-style="italic">
I'm red and underlined
</mj-text>
与文档相比，我使用了三行（而不是一行）并添加了 MJML 属性font-style。没有其他变化。
mj-style包含“.red-text”（CSS 代码，记住）中，我们指定我们希望文本为红色并加下划线（CSS 和 HTML 规则和效果）。mj-text标记中，您可能会期望 MJML 语法font-style="italic"会使文本变为斜体。事实上，我们在浏览器渲染中看到了所有这些。文本为红色、下划线和斜体。
那是怎么发生的？MJML 创建了 HTML；让我们看一下 HTML。
如果您使用上面的 URL，请触摸/单击呈现窗口右上角附近的“查看 HTML”字样。我希望你会看到你认为是 HTML 和 CSS 的代码。
我将在下面提到两个行号。它们可能与 MJML 版本 4.7.1 相关联。我通过搜索“red-text”找到了它们；这应该适用于许多其他版本。
我的第 75 行是包含的 HTMLstyle标记 MJML 的一部分。mj-style里面的 HTML 与包含“红色文本”的 MJML 标记中的代码相同。哇！这就是意图。
我的第 108 行是 HTML 的一部分table，尤其是td. 这个元素有一个“红色文本”类和一个子元素div。有div一个 HTML 属性“font-style:italic”和“我是红色的，带下划线”的文本。
中的文本div受以下因素影响：(1)div调用斜体的属性，以及 (2) 类“red-text”（CSS 和 HTML 规则）中的属性调用 red 和 childdiv的下划线。
这就是文本变成红色、下划线和斜体的方式。这就是如何使用css-class. 和mj-class。感谢您阅读本文。
第二个问题，也是一个好问题。（为什么div在文档中？）
这里介绍了一种技术，作为 MJML 的电子邮件作者，您可能会经常使用。
编写你想要的 MJML。
如果您找不到 MJML 样式来获得正确的渲染，请确定您想要定位的 MJML 标记。将一个添加css-class到 MJML 并mj-style为class您使用的编写一个。现在的目标是知道 MJML 将把 CSS 类放在哪里；确切的样式可以稍后出现。然后，在 HTML 中，找到class您作为 HTML 作者设置样式的 DOM 对象（目标 DOM 对象）。（秘密：你们都是那些作者！）
使用 CSS inmj-style来设置目标 DOM 对象的样式。
在这种情况下，步骤 1 使用上面的 MJML 脚本完成（您还没有mj-styles）。这是您决定将文本“我是红色并带下划线”（等待它！），红色并带下划线的地方。电子邮件作者可以使用 MJML 完成这两项工作，但我们正在学习使用 CSS 和 HTML 来完成这两项工作。我们会继续。
第 1 步将我带到mj-text带有“我是红色且带下划线”的目标——目标mj-text。
第 2 步从您将 放入css-class目标mj-text并编写匹配的mj-style. mj-style可能没有最终属性。
当您在 HTML 代码中搜索您使用的类名mj-style和字符串“I'm red and underlined”时，第 2 步就完成了。如果这些 DOM 对象彼此不接近，就会出现问题；它们可能是同一个对象。它们的关系决定了您将如何mj-style在第 3 步中编写 CSS。
在第 2 步中，我在 HTML 第 108 行class的 a中找到了字符串，在 child 中找到了字符串。tddiv
第 3 步从您编写 CSS 开始，mj-style就像您编写 HTMLstyle以选择目标 DOM 对象一样。注意只使用选择器电子邮件客户端程序支持；否则，您的电子邮件会给使用这些程序的联系人带来意想不到的结果。此外，选择 CSS 属性来创建您的渲染。
当您获得所需的渲染时，步骤 3 结束。
在第 3 步中，“.red-text div”选择div; 在 MJML 脚本中mj-style提到“红色文本”。所需的 CSS 属性也在那里。
这超出了您的问题，但很简短：检查您是否觉得该mj-html-attributes组件使此过程更容易。
那就是，“为什么div？” 它不会一直是div; 目标 DOM 对象的深度可能不止一个。
欢迎来到 MJML 世界。在编写 MJML 时，请记住 HMTLclass列表和 MJML 列表mj-class是分开的，不可互换。与 HTML 属性列表和 MJML 属性列表相同；也不能互换（尽管 MJML 应该重用名称）。您可以全部使用它们，但将它们分开（就像这个元素一样）。
更多问题？这里有帮助。同样， https ://mjml.slack.com/也有很多好的答案（注册：https ://join.slack.com/t/mjml/shared_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg ）。两个友好的人群。