javascript - CSS 在出现特殊字符后设置一些文本样式？

Question

我完成了:

使用 Javascript。

但出于某些原因，我需要一个纯 CSS 解决方案吗？那可能吗？

JS代码:

var titles=document.getElementsByClassName(\"title\");
    for(var i=0;i<titles.length;i++){
    var blueFoo = titles[i].innerHTML.split(\":\")[0];
                var text = titles[i].innerHTML;
                var newHTML = text.replace(blueFoo,'<span style = \"color:rgb(67, 116, 159)\">' + blueFoo + '</span>');
                titles[i].innerHTML = newHTML;
    }    

Answer 1

试试这个。你可以部分地做到这一点。基本上你必须执行 java 脚本来分解你想要设置样式的文本。 (这还假设您不能直接将跨度添加到 html 而不是使用 javascript)。

<style>
.myStyle{ color:rgb(67, 116, 159); }
</style>
<script>
var titles=document.getElementsByClassName(\"title\");
    for(var i=0;i<titles.length;i++){
    var blueFoo = titles[i].innerHTML.split(\":\")[0];
                var text = titles[i].innerHTML;
                var newHTML = text.replace(blueFoo,'<span class=\"myStyle\">' + blueFoo + '</span>');
                titles[i].innerHTML = newHTML;
    }    
</script>