当class列表中，对齐类在缩进类之后时，对齐样式就会失效！

    1. .align-center{
    2.     text-align: center;
    3. }
    4. .indent-1 {
    5.     margin-left: 4em;
    6. }

    生效：

    1. <p class="align-center indent-1">居中对齐</p>

    失效：

    1. <p class="indent-1 align-center">居中对齐</p>

    改变class列表顺序代码：

    1. document.write(`
    2. <ol>
    3.   <li>
    4.     <strong style="color: rgb(32, 33, 36)">字体加粗</strong><em style="color: rgb(32, 33, 36)">字体倾斜</em><u
    5.       style="color: rgb(32, 33, 36)">下划线</u><s style="color: rgb(32, 33, 36)">中划线</s><span class="size-huge"
    6.       style="color: rgb(32, 33, 36)">HUge字号</span><span style="color: rgb(32, 33, 36)"
    7.       class="size-large">Large字号</span><span style="color: rgb(32, 33, 36)">Normal字号</span><span
    8.       style="color: rgb(32, 33, 36)" class="size-small">Small字号</span><span style="color: rgb(32, 33, 36)"
    9.       class="font-default">Def字体</span><span style="color: rgb(32, 33, 36)" class="font-serif">Ser字体</span><span
    10.       style="color: rgb(32, 33, 36)" class="font-sansserif">San字体</span><span style="color: rgb(32, 33, 36)"
    11.       class="font-bebas">Beb字体</span><span style="color: rgb(32, 33, 36)" class="font-QingflowFont">字体</span><span
    12.       style="color: rgb(230, 0, 0)">字体颜色</span><span style="color: rgb(0, 102, 204)">字体</span><span
    13.       style="color: rgb(0, 71, 178)">颜色</span><span
    14.       style="color: rgb(0, 71, 178); background-color: rgb(230, 0, 0)">填充</span><span
    15.       style="color: rgb(32, 33, 36); background-color: rgb(230, 0, 0)">颜色</span><span
    16.       style="color: rgb(32, 33, 36); background-color: rgb(102, 163, 224)">填充验收 </span><span
    17.       style="color: rgb(32, 33, 36)">有序号排列</span>
    18.   </li>
    19.   <li><span style="color: rgb(32, 33, 36)">有序号排列</span></li>
    20. </ol>
    21. <ul>
    22.   <li><span style="color: rgb(32, 33, 36)">无序号排列</span></li>
    23.   <li><span style="color: rgb(32, 33, 36)">无序号排列</span></li>
    24. </ul>
    25. <blockquote><span style="color: rgb(32, 33, 36)">分段符</span></blockquote>
    26. <p class="indent-1"><span style="color: rgb(32, 33, 36)">首行缩进</span></p>
    27. <p class="indent-1"><span style="color: rgb(32, 33, 36)">左对齐方式</span></p>
    28. <p class="indent-1 align-center">居中对齐</p>
    29. <p class="indent-1 align-center">
    30.   <span style="color: rgb(32, 33, 36)">右对齐方式</span>
    31. </p>
    32. <p class="indent-1 align-center">
    33.   <span style="color: rgb(32, 33, 36)">平</span>
    34.   <span style="color: rgb(32, 33, 36)">铺</span>
    35.   <span style="color: rgb(32, 33, 36)">对</span>
    36.   <span style="color: rgb(32, 33, 36)">齐</span>
    37.   <span style="color: rgb(32, 33, 36)">方</span>
    38.   <span style="color: rgb(32, 33, 36)">式</span>
    39. </p>
    40. <p class="indent-1 align-center">
    41.   <a href="#" rel="noopener noreferrer" target="_blank" style="color: rgb(32, 33, 36)">超链接</a>
    42. </p>
    43. <p><img src="" width="289" /></p>
    44. <p>hello!</p>
    46. `)
    48. let visted = []
    50. function dfs2(node) {
    51.     // debugger;
    52.     if (visted.includes(node)) {
    53.         return
    54.     }
    55.     visted.push(node)
    56.     // 当前层逻辑
    57.     // console.log(node)
    58.     if (node.className.match(/.*align-.*/)) {
    59.         console.log(node.className)
    60.         debugger ;let temp = 'indent-1 align-center'.split(' ');
    61.         let left = [];
    62.         let right = [];
    63.         for (let item of temp) {
    64.             if (item.match(/align-.*/)) {
    65.                 left.push(item)
    66.             } else {
    67.                 right.push(item)
    68.             }
    69.         }
    70.         node.className = [...left, ...right].join(' ');
    71.     }
    72.     let children = [...node.children]
    73.     for (let next_node of children) {
    74.         if (next_node && !visted.includes(next_node)) {
    75.             dfs2(next_node)
    76.         }
    77.     }
    78. }
    80. dfs2(document.body)
    82. dfs2(document.body)

    或者将所有样式均转成行内

    outlook客户端不强制使用**word-break: break-all**就不会自动换行，最好加上这个样式。