如何将样式应用于超越其他元素边界的文本范围？

Posted 2023-03-05

【中文标题】如何将样式应用于超越其他元素边界的文本范围？

【英文标题】：How can I apply a style to a span of text that transcends other elements' boundaries?

【发布时间】：2015-10-16 09:27:59

【问题描述】：

假设我有以下段落：

<p>one two </p> <p> three </p><p> four five </p>

现在假设我想将单词 2、3 和 4 设置为绿色，而不会对文档的结构或其他布局产生任何其他影响。我基本上想要一个<span>，它超越像<p>s 这样的块级元素。我怎样才能最简单地做到这一点？我可以

<p>o <span>t</span></p><p><span>t</span></p><p><span>f</span> f</p>

但这让事情变得非常混乱，因为我使用了降价解析器并拥有自己的自定义预处理代码。我该怎么做才能使每个连续长度的绿色文本只有一个“样式开始”标记，并且只有一个“样式结束”标记？

【问题讨论】：

解析后是什么意思？

类似document.querySelectorAll('span p') developer.mozilla.org/en-US/docs/Web/API/Document/…

【参考方案1】：

“交错”html 标签is invalid。您应该使用 3 个单独的 <span> 标签，就像在您的第二个示例中一样。

不幸的是，为了生成正确的 HTML，让您的 HTML 生成器处理这个问题是必要的复杂性。

【参考方案2】：

您可以将您的文本包裹在单个 <p> </p> 中，并在其中包含一个 <span> 包裹您想要设置样式的文本，因此：

<p>one <span>two three four</span> five</p>

http://jsfiddle.net/asbd9rdj/

编辑

要定位多个 <p></p> 标记中的特定字词，请使用 <span></span> 作为内联元素，以便您可以为其附加样式。

<p>one <span>two</span></p>
<p>three <span>four</span></p>

此处的示例：http://jsfiddle.net/79be8L6L/

【讨论】：

那只是改变了参数的问题，不是吗？

@user261849 如果您想继续使用多个<p></p> 标记（如您问题中的示例）而不是仅使用单个<p></p>，那么我建议使用内联元素（跨度）来定位您的特定风格的词。 <span></span> 仅在您为其分配类时才会具有语义值。

对。我会分配课程。但是，我知道 HTML5 具有内置的确定性容错能力，我想知道如何将此类标记解析为 DOM 片段。