css - CSS：自动更改特定字符的颜色？

Question

我正在写一个关于编程的博主。我希望它自动更改特定字符的颜色，而无需手动将类或 id 放入其中。例如，

 <blockquote class="tr_bq">
 <span style="color: #bb60d5;">$</span>
 <span>php app/console doctrine:schema:create</span>
 </blockquote>

当我将"$"字符放入中时blockquote tag，它会自动添加color: #bb60d5以更改其颜色。

有没有办法做到这一点？

score 6 · Accepted Answer

使用 CSS 无法做到这一点，但是您可以使用 javascript 在加载时扫描页面并$使用您的自定义样式将所有实例包装在一个跨度中，这是使用 jQuery 的实现：

$('blockquote').each(function () {
    $(this).html($(this).html().replace(/(\$)/g, '<span style="color: #bb60d5;">$1</span>'));
});

score 1 · Accepted Answer

CSS 找不到单词或与之相关的东西，它不能自动添加颜色或应用样式。

您可以使用 JavaScript，或者您可以使用一些服务器端编码来找出这个词 '$' 并将一些样式应用于该 div。例如：

<div style="color: red;">
 $<span style="color: black">php app/console doctrine:schema:create</span>
</div>

当您知道服务器将读取文件时，这将起作用，在 ASP 中您可以使用它string.Split()来找出某些部分。你可以使用Regex，对于PHP，你可能需要搜索！

但它不适用于 CSS，它只是 JavaScript 或服务器端。您可以使用 CSS 来应用颜色，或者只style在每个元素本身中使用。

score -1 · Accepted Answer

我知道您的问题是关于 CSS 的，但 jQuery 可能是适合它的工具。你可以看看它。

if( $("blockquote").children("span:contains('$')").length ){
    $("blockquote span:nth-child(1)").css("color", "#bb60d5");
}

3 回答 3