如何定位链接的第二个字符并修改颜色？排查代码失效原因

我一直尝试实现定位链接的第二个字符并将其颜色改为红色的效果，目标是修改第二个字母的颜色。在不使用nth-child(2)选择器时，我的代码可以成功将整个链接的颜色改为红色，但添加该选择器后却无法达到预期效果，请问我哪里出错了？

原代码： #

JavaScript：

$(document).ready(function() {
  $(".header-title-text").find("a:nth-child(2)").css({
    color: 'red'
  });
})

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='header-title-text'>
  <a>title</a>
</div>

错误原因： #

1. a:nth-child(2)的作用是选中.header-title-text容器下的第二个<a>元素，但你的HTML里只有一个<a>标签，这个选择器根本匹配不到任何元素，所以不会生效。
2. CSS的nth-child系列选择器只能针对HTML元素，无法直接选中文本里的单个字符。

解决方案： #

要选中链接里的第二个字符，需要用JS将目标字符包裹成独立的内联元素（比如<span>），再给这个元素设置颜色。修改后的代码如下：

JavaScript：

$(document).ready(function() {
  const $targetLink = $(".header-title-text a");
  const linkText = $targetLink.text();
  // 拆分文本，将第二个字符用span包裹
  const formattedText = 
    linkText.slice(0, 1) + 
    '<span style="color: red">' + linkText.slice(1, 2) + '</span>' + 
    linkText.slice(2);
  $targetLink.html(formattedText);
});

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='header-title-text'>
  <a>title</a>
</div>

说明： #

这段代码先获取链接的文本内容，通过字符串拆分将第二个字符单独用<span>标签包裹，再把处理后的内容重新赋值给链接的html()方法，最后给这个<span>设置红色，就能精准实现第二个字符变红的效果。

内容的提问来源于stack exchange，提问作者Roy Kim