VSCode技术问询：如何根据文件名包含的文本修改其文字颜色或背景色

实现思路 #

通过CSS属性选择器或JavaScript判断文件名中的关键词，为匹配的元素设置差异化样式，比如你提到的含“pay”的文件名设为蓝色。

CSS快速实现方案 #

如果你的文件名元素带有data-filename属性（推荐用属性存储文件名，避免文本干扰），直接用属性包含选择器即可：

/* 匹配所有data-filename属性值包含"pay"的元素，设置蓝色文字 */
[data-filename*="pay"] {
  color: #007bff; /* 标准蓝色，可按需替换色值 */
  font-weight: 500; /* 可选：加粗让目标文件名更醒目 */
}

对应的HTML结构示例：

<div class="file-item" data-filename="pay-invoice.pdf">pay-invoice.pdf</div>
<div class="file-item" data-filename="report-2024.xlsx">report-2024.xlsx</div>

兼容性增强：JavaScript辅助方案 #

如果担心CSS选择器的局限性（比如需要直接匹配文本内容），用JS遍历判断更稳妥：

// 遍历所有文件名元素
document.querySelectorAll('.file-name').forEach(el => {
  const fileName = el.textContent.trim();
  // 检测文件名是否包含"pay"关键词，转小写实现不区分大小写匹配，可按需去掉
  if (fileName.toLowerCase().includes('pay')) {
    el.style.color = '#007bff';
    // 或者添加预定义的CSS类，更便于样式维护
    // el.classList.add('highlight-pay');
  }
});

配套CSS类（若用添加类的方式）：

.highlight-pay {
  color: #007bff;
  font-weight: 500;
}

效果参考 #

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