有没有办法将 css 应用于元素的一部分？答案

【问题标题】：Is there a way to apply css to part of the element?有没有办法将 css 应用于元素的一部分？
【发布时间】：2021-03-14 12:25:09
【问题描述】：

我正在寻找一种将新 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）到末尾会有一个特殊属性（如本例中的粗体）

现在我有了关于在元素内部进行更改的所有信息。

但是，我如何在不添加标签、不更改 dom 的情况下使用 javascript 来做到这一点。

谢谢

【问题讨论】：

这能回答你的问题吗？ :nth-letter pseudo-element is not working
您所追求的功能是不可能的，要更改代码中字符的样式，您必须将这些字符包装在单独的标签中以进行特殊样式
你为什么不愿意改变结构，即将<b>包裹在你的部分内部文本周围？
@Lojos Arpad 我的应用程序记住了原始的 dom 结构，并为不同的 dom 元素添加了不同的 css。如果原始 dom 发生变化，我必须追踪它对其他应用程序的影响。我不想那样做。
@a.mola 感谢您的建议。在检查了 maxshuty 评论并进行了研究之后，::nth-letter 仍未实现，并且此时如果不通过 span 标签包含每个字母，就无法逐字母应用不同的 css。

【解决方案1】：

您可以使用span 元素来执行此操作，它专门用于处理内联样式，同时保持整体结构。

一个例子是：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

因此，目前（2021 年至 3 月），如果不使用 span 标签包含每个字母，就无法在一个文本元素中逐个字母地应用不同的 css。我希望在不久的将来会有第n个字母。

我认为我必须重新设计我的项目...

【讨论】：