XSLT：如何在 html 结果中正确应用 css 类

Posted 2023-02-16

【中文标题】XSLT：如何在 html 结果中正确应用 css 类

【英文标题】：XSLT: how correctly apply css class in html result

【发布时间】：2019-06-06 05:52:59

【问题描述】：

我有这个 html，我想使用 XSLT 转换在页面中呈现。

<div class="heading" id="allestimenti">
    <h2 class="heading__title">Allestimenti e destinazioni d'uso</h2>
    <div class="heading__subtitle">Un Daily: <span style="color: #3466cd;">infinite soluzioni</span>
</div>

我想正确渲染 span 标签之间的内容，但我得到的是

Un Daily: <span style="color: #3466cd;">infinite soluzioni</span>

结果。因此，我希望将 css 类正确应用于跨度标签之间的文本，并且我也想从呈现的结果中排除跨度标签。我该怎么做？我使用的 xsl 文件的部分是

<div class="heading__subtitle">
    <xsl:value-of select="Elemento/@Description" />
</div>

元素“描述”将包含的确切位置

Un Daily: <span style="color: #3466cd;">infinite soluzioni</span>

【问题讨论】：

为什么不使用 dom 解析器？

你打算如何将 css 分配给不在标签中的纯文本？

@mplungjan 问题是我希望正确应用 span 和 css 类，但我获得的是带有 span 标签的文本和其中的 css 规范。而且我不知道为什么浏览器不能正确呈现 html。也许我没有使用正确的 xslt 规范，我不知道。

我看不出你得到的和你想要的有什么区别

【参考方案1】：

<xsl:value-of select="Elemento/@Description" /> 建议您使用名为Elemento 的元素节点的Description 属性的字符串值创建一个文本节点。

即使属性包含 HTML 标记，您也不会创建任何 HTML 结果元素（如 span 元素），而是创建包含标记的文本节点。

如果您的 XSLT 处理器和设置支持，您可以尝试

<xsl:value-of select="Elemento/@Description" disable-output-escaping="yes"/>

但这是一个可选的序列化功能，肯定不支持，例如 Firefox/Mozilla 浏览器或 XSLT 处理器不序列化或不负责序列化的其他 XSLT 用途。

【讨论】：

非常感谢！这正是我正在寻找的。我也尝试在 Mozilla/Firefox 中使用此解决方案，一切正常。