Html 通过CSS为特定字符着色

我所追求的是在整个页面中只对代码的一个字符上色

每个单词之间的线条是我希望与文本其他部分不同的颜色，但我希望在CSS中这样做，而不是为了改变颜色而可怕地添加到每个单词中

反病毒端点|磁盘加密| UTM |电子邮件和Web安全

可以通过CSS实现吗

这是我尝试过的，但我不认为我会接近

  | {
     color:#00FF00;
     }

---

如果使用类将|字符包装在一个跨度中，则可以使用该类：

<span class="separator">|</span>

.separator {
    color: #0F0;
}

---

如果使用类将|字符包装在一个跨度中，则可以使用该类：

<span class="separator">|</span>

.separator {
    color: #0F0;
}

---

AFAIK没有针对这一点的纯CSS解决方案。如果您使用的是jQuery，那么使用highlight插件可能是最简单的：

---

AFAIK没有一个纯粹的CSS解决方案。如果您使用的是jQuery，那么使用highlight插件可能是最简单的： 试试这个

css

html

试试这个

css

html

---

另一种解决方案是将文本而不是分隔符封装在s中，并使用：after伪元素创建分隔符

然后，指定最后一个元素不需要分隔符：

HTML

---

演示：

另一种解决方案是将文本而不是分隔符封装在s中，并使用：after伪元素创建分隔符

然后，指定最后一个元素不需要分隔符：

HTML

---

演示：

另一个纯js解决方案：

---

另一个纯js解决方案：

---

我认为你需要使用javascript来实现这一点，这个角色必须包含在一个或其他标记中，这样才能使用纯CSS实现。它是？你能显示HTML源代码吗？@Pekka是的，可以。比我想要的稍微复杂一点，因为我必须添加到所有内容中，但这比添加可能的副本更好。我认为您需要使用javascript来实现这一点。角色必须包含在一个或其他标记中，才能使用纯CSS实现这一点。它是？你能显示HTML源代码吗？@Pekka是的，可以。比我想要的稍微复杂一点，因为我必须添加所有内容，但这比添加可能的副本更好

try <span class="divider">|</span> try

<div class="separator">
    <span>Anti-virus End Point</span>
    <span>Disk Encryption</span>
    <span>UTM</span>
    <span>Email and Web Security</span>
</div>

.separator > span:not(:nth-last-child(1)):after {
    content: ' | ';
    color:#00FF00;
}

<style>
    .paint{
        color: #00FF00;
    }
</style>
<div id="result"></div>
<script>
        var str = "Anti-virus End Point | Disk Encryption | UTM | Email and Web Security";
        str = str.split('|').join('<span class="paint">|</span>');
        document.getElementById("result").innerHTML = str;
</script>