仅使用CSS能否为HTML标签内的特定文本设置单独的字号与颜色？

解决方案 #

CSS目前没有直接选中文本内单个特定字符的原生能力，你之前尝试的伪元素方案无法实现该需求，最优实现方式是将目标字符R用行内<span>标签包裹后单独设置样式。

调整后代码 #

HTML

<div class="normal-text">
  <p>Lo<span class="special-r">R</span>em</p>
</div>

CSS

.normal-text p {
  font-size: 18px;
  color: red;
  text-align: center;
}
/* 按需自定义R的样式 */
.normal-text p .special-r {
  font-size: 24px;
  color: blue;
}

如果你的文本是动态生成、无法手动添加标签的场景，可以用JS批量匹配替换所有的R字符：

const pDom = document.querySelector('.normal-text p')
pDom.innerHTML = pDom.innerText.replace(/R/g, '<span class="special-r">R</span>')

注意：如果p标签内原有其他嵌套DOM结构，该JS方法可能会破坏原有结构，需要根据实际场景调整匹配逻辑。

内容的提问来源于stack exchange，提问作者Sunil R.