CSS は個々の文字を直接スタイル設定できますか?できない場合、代替手段は何ですか?

CSS を使用した特定の文字のスタイル

無理があるように思えるかもしれませんが、特定の文字をターゲットにして変更するために CSS スタイルを適用することは可能ですか?以内にtext?

Answer

残念ながら、純粋な CSS では、特定の文字を対象としたスタイル設定ができません。 CSS は要素またはブロック レベルで動作します。つまり、要素全体 (段落、見出し、個々の単語など) のプロパティを操作できますが、個々の文字を変更するために必要なきめ細かい制御がありません。

ただし特に JavaScript と DOM 操作を使用して、目的の効果を達成するための代替アプローチがあります:

JavaScript解決策

考えられる解決策の 1 つは、JavaScript を活用して、指定された文字列内の特定の文字を見つけてスタイルを設定することです。 innerHTML プロパティと正規表現を利用することで、span 要素内の対象の文字を希望のスタイルで囲むことが可能になります。

ここでは、特定の文字のすべてのインスタンスを強調表示する JavaScript 関数の例を示します (この場合、文字「Z」) 赤:

jQuery.fn.highlight = function(str, className) {    
    var regex = new RegExp(str, "gi");

    return this.each(function() {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

$("p").highlight("Z", "highlight");

デモ

これをチェックしてください動作中の JavaScript ソリューションを確認できる JSFiddle デモ: [JSFiddle Link]

この JavaScript アプローチにより、特定の文字の正確なターゲット設定とスタイル設定が可能になり、CSS に直接文字レベルのスタイル設定オプションがない場合の回避策が提供されます。

以上がCSS は個々の文字を直接スタイル設定できますか?できない場合、代替手段は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。