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

Question

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

例子:

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

编辑:

我现在看到 span 结束标签对于它关闭的是哪个标签是不明确的，第一个 </span>会关闭 span id = 2，而不是我预期的 1。

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

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

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

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

我应该在 div 和 span 之间交替吗？这会消除我正在关闭的内容的歧义，并允许我使用我的 jQuery 悬停脚本进行正确的突出显示吗？我想知道现在重叠的部分超过 2 个。唉，我希望我能解释一下我要关闭的内容。

Answer 1

HTML 中的任何标签都不能重叠 - 它们必须正确嵌套。您发布的 HTML 是有效的，但在语义上可能不是您所期望的。 </span>将终止之前的 <span>在同一范围内。你还没有确定是哪个 <span>您希望每个 </span> 都关闭

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