如何在 Java 中连接 XHTML 文件以解决任何可能的 CSS 冲突？答案

【问题标题】：How to concatenate XHTML files in Java resolving any possible CSS conflicts?如何在 Java 中连接 XHTML 文件以解决任何可能的 CSS 冲突？
【发布时间】：2025-11-27 03:10:01
【问题描述】：

我需要在 Java 和运行时将 XHTML 文件（仅包含格式化文本）连接成一个文件。最终文件必须包含原始文件中的所有内容。但是，由于这些文件可能有不同的 CSS 定义，我必须解决任何可能的样式冲突。我试图搜索一个可以自动执行此任务的库，我相信 JSoup 可以提供帮助，但它似乎无法自动处理 CSS 冲突。

是否有其他开源框架或 API 可以使这项任务更容易实现？

让我给你看一个例子来更好地解释我想要做什么。

<!-- File 1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      h1 { color: red; }
      .default-stroke { font-weight: bold; }
      #custom-id { font-style: normal;  }
      div.align { position: absolute; right: 800px; width: 300px; }
    </style>
  </head>
  <body>
    <h1>HTML file 1 Header 1 tag</h1>
    <div class="align">
      <p id="custom-id" class="default-stroke">PARAGRAPH inside DIV</p>
    </div>
  </body>
</html>

<!-- File 2 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      h1 { color: blue; }
      .default-stroke { font-weight: italic; }
      div.align { position: absolute; right: 1000px; width: 300px; }
    </style>
  </head>
  <body>
    <h1>HTML file 2 Header 1 tag</h1>
    <div class="align">
      <p id="custom-id" class="default-stroke">PARAGRAPH inside DIV</p>
    </div>
  </body>
</html>

<!-- File 3 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      h1 { color: green; }
      .default-stroke { font-weight: 900; }      
      div.align { position: absolute; right: 1200px; width: 300px; }
    </style>
  </head>
  <body>
    <h1>HTML file 3 Header 1 tag</h1>
    <div class="align">
      <p id="custom-id" class="default-stroke">PARAGRAPH inside DIV</p>
    </div>
  </body>
</html>

请注意，所有 CSS 样式（h1、.default-stroke 和 div.align）对每个 XHTML 文件都有不同的定义。这就是我所说的碰撞。我需要找到一种方法来处理此类冲突，但保留每个文件中定义的所有样式。最好的方法是什么？我可以编写自己的代码来引入 CSS 命名空间吗？

我想这不是一项简单的任务。如有任何建议，我将不胜感激。

谢谢！

【问题讨论】：

标签： java css html xhtml concatenation

【解决方案1】：

<style scoped> 可能会有所帮助。将每个 HTML 文件的内容放在它们自己的部分中，并将样式块也放在那里，给它们scoped 属性。见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

<section>
  <style scoped>
    h1 {
      color: red;
    }
    .default-stroke {
      font-weight: bold;
    }
    #custom-id {
      font-style: normal;
    }
    div.align {
      position: absolute;
      right: 800px;
      width: 300px;
    }
  </style>
  <h1>HTML file 1 Header 1 tag</h1>
  <div class="align">
    <p id="custom-id" class="default-stroke">PARAGRAPH inside DIV</p>
  </div>
</section>
<section>
  <style scoped>
    h1 {
      color: blue;
    }
    .default-stroke {
      font-weight: italic;
    }
    div.align {
      position: absolute;
      right: 1000px;
      width: 300px;
    }
  </style>
  <h1>HTML file 2 Header 1 tag</h1>
  <div class="align">
    <p id="custom-id" class="default-stroke">PARAGRAPH inside DIV</p>
  </div>
</section>
<section>
  <style scoped>
    h1 {
      color: green;
    }
    .default-stroke {
      font-weight: 900;
    }
    div.align {
      position: absolute;
      right: 1200px;
      width: 300px;
    }
  </style>
  <h1>HTML file 3 Header 1 tag</h1>
  <div class="align">
    <p id="custom-id" class="default-stroke">PARAGRAPH inside DIV</p>
  </div>
</section>

免责声明：不适用于所有浏览器（目前）。

【讨论】：

这是一个很好且简单的解决方案，但我不得不使用基于
和组合 css 选择器的类似解决方案，因为正如您所说，并非所有浏览器都支持
。我所做的是更改所有 css 样式，添加前缀以避免冲突。例如：#file-1 h1 {...}。此外，我引入了一个
并在其中包含了 file-1 的正文内容。这是为每个文件完成的。我进行了一些测试，它工作正常。谢谢！