SpringBoot加载Freemarker模板时后端传入HTML元素CSS不生效问题

问题根因 #

你模板里定义的.h1、.h2、.p属于CSS类选择器，仅对添加了class="h1"/class="h2"属性的元素生效。而后端传入databody中的是原生<h1>、<h2>等标签，没有匹配的选择器规则，因此样式无法生效。

解决方案 #

方案1（推荐）：修改CSS选择器适配原生标签 #

直接将类选择器替换为标签选择器即可匹配databody里的原生HTML标签，如果怕和页面其他区域的同名标签样式冲突，可以给包裹databody的div加专属类名做范围限定：

1. 先修改模板中包裹databody的div，添加自定义类名：

<div class="databox">
    ${databody}
</div>

2. 修改CSS规则，用带父级限定的标签选择器：

/* 仅匹配databox下的h1/h2/h3/p标签，不会影响页面其他区域 */
.databox h1, .databox h2 {
    font-weight:normal;
    font-size: 18px
}
.databox h3 {
    color: #9b9b9b;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.22;
}
.databox p {
    font-weight: 300;
    font-size: 16px;
    color: #333333;
    line-height: 1.22;
}

方案2：后端修改databody内容为标签加类 #

如果不想调整现有CSS规则，可在后端拼接databody内容时，给对应标签加上对应的类属性，示例如下：

// 后端赋值时给标签加class
String databody = "<h1 class=\"h1\">Something</h1>\n<h2 class=\"h2\">foo bar</h2>";

补充说明 #

如果后续出现databody里的标签直接以文本形式展示在页面上的情况，是Freemarker默认开启了HTML转义导致的，修改模板变量写法为${databody?no_escape}即可关闭转义，正常渲染HTML标签。

内容的提问来源于stack exchange，提问作者pvpkiran