有没有一种方法可以将css应用到元素的一部分？

Question

我正在寻找一种方法来应用新的CSS的元素只有一部分。

例如。原始的HTML看起来像这样

<p>123456</p>

我只想将456设置为粗体。

当然，我可以通过在456中添加另一个标签来实现，比如

<p>123<b>456</b></p>

但在我的应用程序中，我不希望更改原始的DOM结构。通过添加新标记，我更改了DOM结构。

为此，我正在考虑向现有标记添加新的自定义属性，如下所示

<p data-wms="e-3">123456</p>

这里的data-wms表示有特殊部分，e-3表示从索引3字符(这里是4)到结尾将有一个特殊属性(如本例中的粗体)

现在，我有了关于在元素中更改位置的所有信息。

但是，我如何才能在不添加标记的情况下使用javascript做到这一点，而不改变dom。

谢谢

Answer 1

您可以使用span元素来实现这一点，它是专门用来处理内联样式，同时管理整个结构的。

下面是一个例子：

<p>123<span class="bold-highlight">456</span></p>

Answer 2

如果它是一个静态页面，并且您想要更改特定标记中特定文本的样式，如下所示

<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>

假设您只想设置第三个元素的样式，您可以使用jQuery通过以下代码对其进行更改，以确保您可以使用JavaScript，但jQuery将帮助您缩短代码

$( "p:nth-child(3)" ).css("color","#f00");

Answer 3

感谢大家的建议，我做了更多的研究，特别是关于第n个字母。

虽然第n个字母正是我想要的，但我发现它仍然只是proposal，没有在任何浏览器中实现。

因此，没有办法在一个文本元素中逐个字母地应用不同的css，而不在此时(2021-3月)包含每个带有span标签的字母。我希望在不久的将来会有第n封信。

我想我必须重新设计我的项目。