39

コード例:

<p class="test">string</p>

最後の文字 (この場合は "g") の色を変更したいのですが、css による解決策が必要です。javascript による解決策は必要ありません。

文字列を文字ごとに表示しますが、静的ソリューションを使用できません。

4

8 に答える 8

190

誰もがそれはできないと言います。私はそうではないことを証明するためにここにいます。

はい、できます。

さて、それは恐ろしいハックですが、それは可能です。

2 つの CSS 機能を使用する必要があります。

  • まず、CSS はテキストの流れの方向を変更する機能を提供します。これは通常、アラビア語やヘブライ語などのスクリプトに使用されますが、実際にはどのテキストでも機能します。英語のテキストに使用すると、文字はマークアップで表示される順序とは逆の順序で表示されます。したがって、反転した要素で「文字列」という単語として表示されるテキストを取得するには、「gnirtS」を読み取るマークアップが必要です。

  • 次に、CSS には::first-letter、テキストの最初の文字を選択する疑似要素セレクターがあります。（これが利用可能であることは他の回答ですでに確立されていますが、同等の::last-letterセレクターはありません）

ここで::first-letter、反転したテキストと組み合わせると、"gnirtS" の最初の文字を選択できますが、"String" の最後の文字を選択しているように見えます。

したがって、CSS は次のようになります。

div {
    unicode-bidi:bidi-override;
    direction:rtl;
}

div::first-letter {
    color: blue;
}

および HTML:

<div>gnirtS</div>

はい、これは機能します - ここで動作するフィドルを見ることができます: http://jsfiddle.net/gFcA9/

しかし、私が言うように、それは少しハックです。そして、すべてを逆向きに書くのに時間を費やしたいと思う人はいますか? 実際には実用的な解決策ではありませんが、質問には答えます。

于 2013-03-15T22:32:13.323 に答える
16

JavaScriptを使用しない場合、唯一のオプションは次のとおりです。

<p class="test">strin<span class="other-color">g</span></p>

あなたのフィドルリンクを編集してください：

すでにかなりの数の JavaScript ソリューションを使用しているのに、なぜ JavaScript ソリューションが必要ないと言ったのか、よくわかりません。とにかく、この例では、いくつかの小さな変更を加えるだけで済みます。から10行目を変更

elem.text(elem.text() + contentArray[current++]);

に

if ( current == contentArray.length-1 ) {
    elem.html(elem.html() + "<span style='color:red'>"+contentArray[current++]+"</span>");
} else {
    elem.html(elem.html() + contentArray[current++]);
}

実際には HTML マークアップが挿入されているため.html()、今ではなく使用することが重要であることに注意してください。.text()

作業フィドル: http://jsfiddle.net/QTUsb/2/

于 2013-03-15T20:44:25.923 に答える
10

::afterHTML を変更せずに、CSS と疑似要素のみを使用して実現できます。

.test {
  font-size: 16pt;
  position: relative;
}
.test::after {
  bottom: 0;
  color: red;
  content: 'g';
  position: absolute;
  transform: translate(-100%, 0);
}
<p class="test">string</p>

于 2016-04-17T12:23:33.773 に答える
1

どのように「文字列を文字ごとに表示」しますか? 文字列 (変数) 内の文字をループしている場合は、最後の文字にいるときを確実に判断し、それをサーバー側とクライアント側のどちらで行うかを でラップできます。

別の質問に添付されているフィドルを見ると...

これがあなたが話していることである場合、.innerHTML代わりに要素のを設定する必要があるかもしれませんelement.text()

http://jsfiddle.net/SLKEn/のフィドルから、次のように変更します

if(current < contentArray.length) {
    elem.html(
            elem.html() +
              (current == contentArray.length-1 ?
               '<span class="lastchar">' + contentArray[current++] + '</span>' :
               contentArray[current++])
             );
        }

CSSと一緒span.lastchar { color: red; }

更新:あなたの他の質問に基づいて作業中のフィドル。

于 2013-03-15T21:06:28.820 に答える
0

回答スレッドにコメントすることはできませんが、Marc_Alx によって提供された回答のエラーを指摘したいと思いました。その解決策は、プロパティの後ろにセミコロンを追加した後にのみ機能しましたcontent...したがって、次のようになりますcontent:"ing";

.test::after{
  content:"ing";
  color:yellow;
}
<p class="test">str</p>
于 2018-11-08T16:35:01.820 に答える