0

这是我试图破解的一个晦涩难懂的坚果，甚至试图把它变成一个问题都很困难，所以最好我展示我拥有什么以及我想要得到什么：

<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 将被发送到服务器，我正在尝试减少数据量。

4

1 回答 1

0

您可以在此处看到一个彩色示例：

[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

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

于 2013-05-20T18:30:08.773 回答