Question

简单的问题，在HTML中重叠跨度是否有效？

示例：

<span id="1">This is <span id="2"> some text </span> some other text </span>
                                              ^                        ^
                                            End1                     End2

编辑：

我现在看到跨越结束标记对于它正在关闭哪一个是不明确的，并且第一个将关闭跨度id = 2，而不是像我想要的那样。

我的问题是，我有一块文字，我试图根据鼠标悬停的内容突出显示。该文本块由部分组成，其中一些部分彼此“重叠”。我正在尝试使用一些jQuery和HTML来呈现此文档，因此当我将鼠标悬停在各个部分上时，将突出显示相应的部分。

因此，在上面的示例中，第一个跨度意味着以第一个span close标记结束，第二个span意味着以第二个span close标记结束。这是因为我的文档的语义，这是两个重叠的部分。

我想要它，所以当我向左移动时，它只会突出显示跨越id = 1且第一个跨度关闭，如果我在两个“重叠”跨度之间悬停，它将突出显示它们两者，如果我将鼠标悬停在右侧，它将从span id = 2突出显示到最后一个跨度。

然而，我开始认为这是不可能的。有什么方法可以区分HTML中允许重叠的文本片段吗？因此，当我将鼠标悬停在不同的跨度上时突出显示的jQuery脚本将突出显示正确的部分。

我应该在div和span之间交替吗？这会消除我当时正在关闭的内容，并允许我使用我的jQuery悬停脚本进行适当的突出显示吗？我想知道现在有两个以上的段重叠。叹了口气，我希望我可以解释一下我正在结束的事情。

Answer 1

HTML中没有标记可以重叠 - 它们必须正确嵌套。您发布的HTML有效，但可能在语义上不符合您的预期。 将在同一范围内终止先前的。您尚未确定每个

要关闭的

<span id="span1">This is <span id="span2"> some text </span> (ends span2) </span> (ends span1)

在这种情况下，这肯定会产生很大的不同：

<span>This is <span> some text </span> and more text </span>

Answer 2

允许SPAN元素的内容包含任何“内联”元素。 SPAN是这些“内联”元素之一。有关详细信息，请参阅DTD declaration for the SPAN element。

Answer 3

是的，这是合法的。您可以这样做为外部和内部跨度指定不同的样式（如果您要指定类或样式等）。

BTW - 更常见的术语是“嵌套”而不是“重叠”。

Answer 4

这是合法的（foo为红色; bar为蓝色; spam再次为红色，因为它已嵌套）：

<span style="color: red">foo<span style="color: blue">bar</span>spam</span>

这不是：

<div style="color: red">foo<span style="color: blue">bar</div>spam</span>

但值得注意的是，在MediaWiki和博客中的其他一些消毒引擎是合法的，因为它将上述内容转换为：

<div style="color: red">foo<span style="color: blue">bar</span></div>
<span style="color: blue">spam</span>

可以说这会鼓励不良行为，但不是每个写博客的人都像我们这样使用堆栈溢出的人一样技术性（发布为社区维基，因为这可能会被拒绝:-P）

Answer 5

我知道，回答这个问题为时已晚。但是，这可以帮助某人。

是的！完全正确的是，html中没有标签可以重叠。我有确切的情况，如上面的问题所述。 但是，一切都有解决方案！我们可以使用html标签版本来解决这个问题！

上述问题中提到的html片段可以像

一样破解

<span id="1_1">This is </span><span id="1_2"><span id="2_1"> some text </span></span><span id="2_2"> some other text </span>

现在，您必须为鼠标悬停添加自定义处理程序。通过处理程序回调，您需要将span id传递给JavaScript。在JavaScript控制器中，您需要使用所有parent id保留child ids的适当地图（例如，版本1.x; {'1': ['1_1', '1_2', '1_3']}等）。现在，无论何时将鼠标悬停在任何跨度上，您都可以找到它的所有兄弟姐妹。这是诀窍！发布此内容，您只需为所有版本添加自定义CSS类。（例如，如果您将鼠标悬停在内容1_1上，则所有1_x个版本都会突出显示。

对于所有边缘案例，它对我来说都很顺利。

Answer 6

没有

当我们达到第一个收盘/跨度时，您要关闭的两个开盘价中的哪一个是不明确的。

大多数人和计算机，因为它是唯一合法的选择，所以你会得出结论，你打算关闭后者。但考虑到你的问题的其他背景，我怀疑你实际上打算关闭前一个跨度;这不是“合法的”。

用“你意味着嵌套而非重叠”纠正你的人正在做同样的演绎;你不可能意味着“重叠”，因为这是非法的。我认为你确实意味着'重叠'，但没关系，你的秘密对我来说是安全的。

Answer 7

我理解你的问题，显然没有优雅的解决方案。如果您只关心视觉结果，一种解决方案是关闭并正确重新打开标签。而不是：

<span id="1">This is <span id="2"> some text </span> some other text </span>

使用类似的东西：

<span class="hl1">This is <span class="hl2"> some text </span></span><span class="hl2"> some other text </span>

如果仅使用颜色或背景属性进行突出显示（例如，使用rgba颜色，以允许多次突出显示），则应执行此操作。如果你使用轮廓/边框，那么它就不会，因为你也会有标签关闭的中间边框。

恕我直言，一个标签或其他结构（我认为它更像是一个锚），它允许重叠并指示它关闭的位置将被考虑用于实现。

如何使用HTML区分重叠的文本片段？

7 个答案: