如何仅用CSS修改SAP工单系统中含特定文本的span元素？

遇到这种SAP系统动态生成元素、丢失title属性的情况确实头疼，纯CSS本身没有直接匹配元素文本内容的选择器（你尝试的innerText是JS DOM属性，不是CSS能识别的HTML属性），所以我们需要用「JavaScript辅助标记 + CSS选择」的方案来解决，这是目前最可靠的方式。

步骤1：用JavaScript给目标元素添加自定义标记 #

因为SAP的元素是动态渲染的，我们需要确保在元素加载完成后，根据文本内容给它添加一个可被CSS识别的自定义属性（比如data-priority）。

// 遍历所有SAP文本类的span元素（根据你提供的class：sapMText）
function markPrioritySpans() {
  document.querySelectorAll('span.sapMText').forEach(span => {
    // 去除文本前后空格，统一转为小写避免大小写问题
    const priorityText = span.innerText.trim().toLowerCase();
    // 只处理我们关心的优先级值
    const validPriorities = ['low', 'medium', 'high', 'critical'];
    if (validPriorities.includes(priorityText)) {
      // 添加自定义数据属性
      span.setAttribute('data-priority', priorityText);
    }
  });
}

// 确保在SAP组件渲染完成后执行（通用方案）
window.addEventListener('load', () => {
  // 初始执行一次
  markPrioritySpans();
  // 监听DOM变化，处理后续动态加载的元素
  const observer = new MutationObserver(markPrioritySpans);
  observer.observe(document.body, { childList: true, subtree: true });
});

步骤2：用CSS选择自定义属性设置样式 #

现在有了data-priority属性，就可以轻松用CSS选择器定位目标元素了：

/* 为不同优先级设置差异化样式 */
span[data-priority="low"] {
  background-color: #e8f5e9;
  color: #2e7d32;
  padding: 2px 6px;
  border-radius: 4px;
}

span[data-priority="medium"] {
  background-color: #fff3e0;
  color: #ef6c00;
  padding: 2px 6px;
  border-radius: 4px;
}

span[data-priority="high"] {
  background-color: #ffebee;
  color: #c62828;
  padding: 2px 6px;
  border-radius: 4px;
}

span[data-priority="critical"] {
  background-color: #b71c1c;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}

为什么你之前的选择器无效？ #

• [span*=Medium]：语法错误，CSS属性选择器的格式是元素[属性*=值]，你没有指定要匹配的属性，所以这个选择器不合法。
• span[innerText="Medium"]：innerText是JavaScript DOM对象的属性，不是HTML元素自带的属性，CSS无法通过它来选择元素，所以完全无效。

额外优化（针对SAP UI5） #

如果你的系统是基于SAP UI5开发的，建议用官方的渲染事件来触发标记函数，比load事件和MutationObserver更精准：

sap.ui.getCore().attachEvent("afterRendering", markPrioritySpans);

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