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

简单的问题，在html中重叠跨度是否有效？如何区分使用HTML的文本的重叠部分？

实施例：

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

编辑：

我现在看到的结束标记的跨度将是模糊的大约哪一个正在关闭，并且第一将关闭跨度ID = 2，而不是1像我打算的那样。

我的问题是，我有一块文字，我试图强调基于鼠标悬停在什么。这个文本块由多个部分组成，其中一些“彼此重叠”。我试图使用一些jQuery和HTML来展示这个文档，所以当我将鼠标悬停在这些部分上时，相应的部分将被突出显示。

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

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

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

我应该在div和span之间切换吗？这将消除我正在关闭的东西，并允许我用我的jQuery悬停脚本做适当的突出显示？我想知道现在有两个以上的部分重叠。叹气，我希望我能解释我正在结束的事情。

来源

2010-04-28 Siracuse

http://stackoverflow.com/questions/1078127/are-nested-span-tags-ok-in-xhtml – 2010-04-28 00:27:55

这些不重叠的标签，它们是嵌套的。 – 2010-04-28 00:31:34

您可能因此被逮捕。 – alex 2010-04-28 00:31:37

没有标签可以在HTML中重叠 - 它们必须正确嵌套。您发布的HTML是有效的，但可能在语义上不符合您的期望。 A 将在相同的范围内终止先前的。您还没有确定哪个你期待着与各

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

来源

2010-04-28 00:33:40

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

顺便说一句 - 更常见的术语是“嵌套”而不是“重叠”。

来源

2010-04-28 00:28:20

我想你误解了这个问题。看起来他确实想要重叠标签，而不是嵌套标签。 – Gabe 2010-04-28 01:27:27

在这种情况下，答案是否定的，你不能做重叠标签。 – 2010-04-28 03:13:13

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

来源

2010-04-28 00:30:58 Dustin

+1提供适当的参考。 – NealB 2010-04-28 00:42:12

+1用于引用w3规格 – 2010-04-28 00:56:05

-1用于回答错误的问题。他想重叠标签，而不是嵌套它们。 – Gabe 2010-04-28 01:23:33

号

当我们打第一次关门/跨度不明确您想关闭两个开门跨度中的哪一个。

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

“你的意思是嵌套的，不重叠的”正在进行相同的演绎;你不可能意味着“重叠”，因为这将是非法的。我认为你确实意味着'重叠'，但没关系，你的秘密对我来说很安全。

来源

2010-04-28 00:49:39

这是合法的（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）

来源

2010-04-28 01:09:05 cryo

我明白你的问题，显然没有优雅的解决方案。如果您只关心视觉效果，一种解决方案就是关闭并重新打开标签。相反的：

<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颜色，以允许多个高亮）

，这应该这样做。如果你使用大纲/边框，那么它不会，因为你将有标签关闭的中间边界。

恕我直言，一个标签或其他结构（我认为它更像一个锚点），允许重叠，并指出它关闭的地方将是考虑实施。

来源

2013-07-10 12:44:22 Costas

我知道了，回答这个问题来不及。但是，这可以帮助某人。

是的！它完全正确，没有标签可以重叠在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控制器中，您需要保留所有child ids（例如，版本1.x; {'1': ['1_1', '1_2', '1_3']}等）的parent id的适当映射。现在，只要你将鼠标悬停在任何跨度上，你就可以找到它的所有兄弟姐妹。这是诀窍！发布这个，你只需要为所有版本添加一个自定义的CSS类。（例如，如果您将鼠标悬停在编号1_1上，则所有1_x版本都将突出显示）。

对于我来说，对于所有的边缘情况，它工作得很顺利。

来源

2017-07-06 17:16:41

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

回答

相关问题