1

私が何かを持っている場合

<p id="something">My Text Here</p>

CSS である種の疑似セレクターを使用して、テキストの特定のテキスト要素にのみスタイルを適用することは可能ですか?

例、私が欲しい：

「私の」色：赤。および「テキスト」の色: 青。

4

4 に答える 4

6

いいえ、これは不可能です。

:first-letterやなどの疑似セレクターがあり:first-lineますが、個別にスタイルを設定できる要素でラップしない限り、個々の単語を選択することはできません。

<p id="something">
    <span class="foo">My</span> 
    <span class="bar">Text</span> 
    <span class="baz">Here</span>
</p>

次に、それらを個別にスタイルできます。

.foo {
    color: #ff0000;
}
.bar {
    color: #00ff00;
}
.baz {
    color: #0000ff;
}
于 2012-06-21T07:31:25.200 に答える
4

いいえ。テキストの一部を異なる色にしたい場合は、それらを別々の要素 (ほとんどの場合、'') で囲む必要があります。例えば：

<p id="something"><span class="red">My</span> <span class="blue">Text</span> Here</p>

.redもちろん、これにはとの適切な CSS も必要.blueです。

上記の例外は疑似セレクター:first-letterと:first-lineですが、これらには柔軟性がありません。

于 2012-06-21T07:30:41.523 に答える
0

最初の文字のスタイリングには、最初の文字の疑似クラスを使用できます

p:first-letter
{ 
font-size:200%;
color:#8A2BE2;
}

ただし、2番目の「テキスト」に疑似クラスを使用することはできません。これをhtmlタグでラップし、個別にスタイルを設定する必要があります。

単語のスタイリングを変えることはできません。

于 2012-06-21T07:32:16.967 に答える
0

他のユーザーは、ネイティブでは不可能だとすでに言っています。jQuery を使用している場合は、タグから推測できるように、JavaScript からちょっとした工夫をして、Pタグ内のテキストを次のように「トークン化」できます。

$("p").html($.map($("p").text().split(" ")​,function (i,e) {return "<span id='w"+e+"'>"+i+"</span>";}).join(" "));

このコマンドはセレクター (pこの場合、使用できますp#myId) を取り、すべての単語を置き換えます。

 This is a sentence

になる

 <span id='w0'>This</span>
 <span id='w1'>is</span>
 <span id='w2'>a</span>
 <span id='w3'>sentence</span>

したがって、次のような CSS を使用できます。

 p span.w2 {color: red;}

3番目の単語に色を付けます。

于 2012-06-21T07:45:49.047 に答える