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()いくつかの部分を見つけるために使用できます。PHP の場合は Regex を使用できます。検索が必要になる場合があります。

ただし、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