html - 通过 CSS 为特定字符着色

Question

我所追求的是在整个页面中只用我的代码的一个字符着色。

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

杀毒端点 | 磁盘加密 | UTM | 电子邮件和网络安全

可以通过 CSS 实现吗？

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

  | {
     color:#00FF00;
     }

Answer 1

Another solution would be encapsulating the text (not the separators) inside <span/>s, and use :after pseudo-element to create the separator.

Then, specify that, for the last element, the separator is not required:

HTML

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

CSS

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

Demo: http://jsfiddle.net/j9kZS/1/

Answer 2

如果你包装每个 | 跨度中的字符与您可以使用的类：

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

.separator {
    color: #0F0;
}

Answer 3

尝试这个

http://jsfiddle.net/v9Vbc/2/

css

 .divider {
     color:#00FF00;
     }

html

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

Answer 4

AFAIK 对此没有纯 CSS 解决方案。如果您使用的是 jQuery，那么使用高亮插件可能是最简单的： http: //bartaz.github.io/sandbox.js/jquery.highlight.html

Answer 5

pure 的另一种解决方案js：

<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>