如何设置CSS规则实现HTML code标签内代码注释的样式格式化？

注意：CSS 原生没有提供文本内容匹配选择器，早年提案的:contains()已经被废弃，目前没有纯CSS实现该需求的方案，必须配合内容标记或者JS预处理实现。

方案1：预处理标记注释（兼容性最佳，推荐） #

在渲染代码内容前，手动或者通过后端脚本把单行注释用带类名的<span>标签包裹，是最稳定不会出现误匹配的方案。

• 处理后的HTML结构示例：

<pre>
  <code>
    git reset [file]        <span class="code-comment">//unstage but preserve file content</span>
    ...
  </code>
</pre>

• 对应CSS规则示例（可根据需求自定义样式）：

/* 匹配code标签内的注释内容 */
code .code-comment {
  color: #6a9955; /* 经典暗绿色注释配色 */
  font-style: italic;
  opacity: 0.8;
}

方案2：前端JS自动匹配注释 #

如果无法提前修改代码内容的HTML结构，可以通过JS动态扫描页面内的<code>标签，自动匹配//开头的单行注释并包裹样式标签：

• JS处理代码：

// 扫描所有code标签，自动为单行注释添加样式标记
document.querySelectorAll('code').forEach(codeEl => {
  // 正则匹配每行末尾//开头到行尾的内容，若需要适配带//的字符串场景，可自行扩展更严谨的正则规则
  codeEl.innerHTML = codeEl.innerHTML.replace(/(\/\/.*$)/gm, '<span class="code-comment">$1</span>');
});

• 样式规则和方案1完全一致即可，该方案适配你举例的git命令类纯代码场景完全够用。

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