javascript - 如何规范化顺序跨度内联 css？

Question

这是一个我试图破解的晦涩难懂的问题，甚至试图将其放入一个问题中也很困难，所以我最好展示我拥有的东西和我想要得到的东西:

<div>
  <span>A</span>
  <span style='font-weight:bold'>B</span>
  <span style='font-weight:bold;font-style:italic'>C</span>
  <span style='font-weight:bold'>B</span>
  <span style='font-style:italic'>C</span>
  <span>A</span>
</div>

我正在尝试设计一种算法将其转换为:

<div>
  A
  <span style='font-weight:bold'>
    B
    <span style='font-style:italic'>C</span>
    B
  </span>
  <span style='font-style:italic'>C</span>
  A
</div>

这当然是一个简化的示例，但目标是采用一系列具有各种内联样式的顺序跨度，并转换为显示相同的更简单的结果。我在这上面花了几天时间，非常接近，但总能找到它坏掉的地方。我不需要它来处理所有样式，但需要字体粗细、字体样式、颜色、字体大小和字体系列。我知道这不太可能，但如果有人已经做过这样的事情，我很想看看它如何拯救我一个痛苦的世界。

我做了一个函数来返回一个具有 2 个元素的通用样式的对象，例如:

cs = getCommonStyles([cn,c]);

cn 和 c 是具有内联样式的 span 元素，cs 是包含通用样式的对象。此函数的示例返回值可能是:

{fontWeight:"bold", fontStyle:"italic"}

每个元素中都存在两种样式。因此，欢迎任何建议的答案假设使用此类功能。

更新:以上只是一个例子。样式的组合是任意的，顺序输入跨度的数量可以达到数百个。 html 将发送到服务器，我正在尝试减少数据量。

Answer 1

你可以在这里看到一个彩色的例子:

[http://jsfiddle.net/yAywd/1/][1]

您可以像这样使用 CSS3 :nth-child() 伪类:

div span:nth-child(1n) {
    font-weight:bold;
}

div span span {
    font-style:italic;
    font-weight:normal !important;
}

div span:nth-child(2n) {
    font-style:italic;
}

http://reference.sitepoint.com/css/pseudoclass-nthchild

无论如何，我认为您示例中的语义是错误的。