Question

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

每个单词之间的界限是我想要与文本的其他部分不同的颜色，但是我想在CSS中这样做，而不是为了改变它的颜色而添加到每个单词。

反病毒终点|磁盘加密| UTM |电子邮件和网络安全

可以通过CSS吗？

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

  | {
     color:#00FF00;
     }

Answer 1

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

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

.separator {
    color: #0F0;
}

Answer 2

另一种解决方案是在<span/> s内封装文本（而不是分隔符），并使用:after伪元素创建分隔符。

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

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

演示：http://jsfiddle.net/j9kZS/1/

Answer 3

AFAIK没有纯粹的CSS解决方案。如果您使用的是jQuery，最好使用突出显示插件： http://bartaz.github.io/sandbox.js/jquery.highlight.html

Answer 4

试试这个

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

CSS

 .divider {
     color:#00FF00;
     }

HTML

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

Answer 5

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

通过CSS为特定字符着色

5 个答案: