更改最后一个字符颜色 CSS

在 CSS 中，我们可以使用伪类 :last-child 来选中元素的最后一个子元素。我们可以利用这个特性来实现更改最后一个字符颜色的效果。

具体实现步骤如下：

1. 选中元素的最后一个字元素，可以使用 :last-child。

2. 将选中的元素设置为 span 标签，因为 span 是行内元素，只包含文本内容，不会产生换行，可以保证选中的是整个文本内容。

3. 在 CSS 中为 span:last-child 添加样式，设置颜色等属性。

/* 选中最后一个字符 */
span:last-child {
  color: red;
}

示例代码如下所示：

<p>这是一段文本，最后一个字符需要更改颜色。</p>
<p>这是另外一段文本，同样也需要更改最后一个字符颜色。</p>

<style>
    /* 选中最后一个字符 */
    span:last-child {
        color: red;
    }
</style>

<script>
    // 使用 JavaScript 在每个段落的最后一个字符后面添加一个 span 标签
    const paragraphs = document.querySelectorAll('p');
    paragraphs.forEach((p) => {
        const text = p.textContent.trim();
        const lastChar = text[text.length - 1];
        const span = document.createElement('span');
        span.textContent = lastChar;
        p.removeChild(p.lastChild);
        p.appendChild(span);
    });
</script>

以上代码将会更改每个段落中最后一个字符的颜色为红色。