如何根据动态生成的h1标签文本首字母自动设置对应文本颜色？

该需求完全可以实现，下面是两种主流的可行实现方案：

适用场景：不管h1是服务端渲染生成，还是客户端动态插入，都可以用这个方案。
首先定义颜色匹配规则，遍历所有目标元素匹配首字母设置颜色，再加DOM变动监听适配动态新增的内容：

// 自定义颜色分组规则，可按需调整分组和对应色值
const colorMap = {
  'red': ['A', 'B', 'C', 'D'],
  'green': ['E', 'F', 'G', 'H'],
  'blue': ['I', 'J', 'K', 'L'],
  'purple': ['M', 'N', 'O', 'P'],
  'orange': ['Q', 'R', 'S', 'T'],
  'gray': ['U', 'V', 'W', 'X', 'Y', 'Z']
}

// 给单个目标元素设置颜色的方法
function setDynamicColor(el) {
  const text = el.textContent.trim()
  if (!text) return
  // 取首字母转大写匹配规则
  const firstChar = text[0].toUpperCase()
  for (const [color, charList] of Object.entries(colorMap)) {
    if (charList.includes(firstChar)) {
      // 可替换为加类名的方式：el.classList.add(color)，配合CSS预设样式更易维护
      el.style.color = color
      break
    }
  }
}

// 页面初始加载时处理已存在的所有目标h1
document.querySelectorAll('h1.dynamic-color').forEach(setDynamicColor)

// 监听DOM变动，适配动态新增的h1元素
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType !== 1) return
      if (node.tagName === 'H1' && node.classList.contains('dynamic-color')) {
        setDynamicColor(node)
      }
      node.querySelectorAll?.('h1.dynamic-color')?.forEach(setDynamicColor)
    })
  })
})
observer.observe(document.body, { childList: true, subtree: true })

方案优点：

• 无需修改原有渲染逻辑，接入成本低
• 兼容性好，支持所有主流浏览器
• 自动适配动态新增的h1元素，不需要额外手动触发更新

适用场景：h1由服务端渲染，或者React/Vue等前端框架渲染生成的场景，直接在渲染环节就根据首字母给元素加上对应颜色类。
首先在CSS中预定义颜色类：

.dynamic-color.red { color: #f31212; }
.dynamic-color.green { color: #10a32c; }
.dynamic-color.blue { color: #1273f3; }
/* 其余颜色类按需补充 */

渲染时判断首字母加对应类即可，以React为例：

const getColorClass = (title) => {
  const firstChar = title.trim()[0]?.toUpperCase()
  if (['A','B','C','D'].includes(firstChar)) return 'red'
  if (['E','F','G','H'].includes(firstChar)) return 'green'
  // 其余规则按需补充
  return ''
}

// 组件渲染逻辑
<h1 className={`dynamic-color ${getColorClass(titleText)}`}>{titleText}</h1>

Vue等其他框架实现逻辑一致，在模板中调用判断方法加类即可。
方案优点：

• 无额外客户端运行时开销，性能最好
• 页面渲染完成直接显示正确颜色，不会出现样式闪烁
• 规则统一维护，后续调整颜色只需要修改CSS或者判断逻辑即可

补充说明：目前CSS标准没有支持匹配元素文本内容的选择器，因此无法完全通过纯CSS实现该需求。

内容的提问来源于stack exchange，提问作者Martin Sprušanský