如何區分使用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的文本的重疊部分？

回答

相關問題