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

Question

我需要在 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 个命名空间吗？

我想这不是一项微不足道的任务。如果有任何建议，我将不胜感激。

谢谢！

Answer 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>

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

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

How to concatenate XHTML files in Java resolving any possible CSS conflicts?

java

css

html

xhtml

concatenation