9

私はフレーズを持っています、Client Testimonialそして私はClient私が使用しただけを変更したいのですfirst-letterが、色を変更するためのcssの方法はありますか..javascriptはありません。

4

5 に答える 5

13

使って:beforeみませんか？

テキストを「ClientTestimonial」から「Testimonial」に変更し、CSSを使用して次の:beforeルールを適用します。

HTML：

<div class="word">Testimonial</div>​​​​​​​​

CSS：

.word {
 color: black;       
}
.word:before {
 color: red;
 content: "Client ";
}

例： http： //jsfiddle.net/LvZt7/

于 2012-08-31T15:49:19.983 に答える
8

他の人が指摘しているように、CSSで利用できる疑似セレクターは（残念ながら*）ありません:first-word（私が現在知っている限り、バージョン3または4でも）。ただし、JavaScriptなしで存在する可能性は2つありますが、どちらにも欠点があります。

最初の、そして最も簡単なのは、スパンの最初の単語を単純にラップすることです。

<p><span>Client</span> Testimonial</p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

そして、ハイライトでスパンをスタイリングします。

p span {
    color: #f90;
}

JSフィドルデモ。

spanこのアプローチでは、スタイリングの目的で要素を追加する必要がありますが、実装は簡単で、クロスブラウザーで確実に機能します。

2つ目は、無関係なタグの追加を回避しますが、少し壊れやすくなりますspanが、代わりに、属性を追加する必要があります。

<p data-highlightword="Client">Client Testimonial</p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

次のCSSを使用します。

p[data-highlightword] {
    position: relative;
}

p[data-highlightword]::before {
    content: attr(data-highlightword);
    color: #f90;
    position: absolute;
    top: 0;
    left: 0;
}​

JSフィドルデモ。

このアプローチは、単一の要素への単一の属性の追加に依存していますが、追加のCSSが必要であり、準拠したブラウザーでのみ機能します。これはほとんどすべてであり、現在はIE 8、またはおそらく9のみであり、以下では問題があります。

于 2012-08-31T15:48:20.103 に答える
3 
<p><span style="color: #c0ff33;">Client</span> Testimonial</p>

そうです、<span></span>そのような状況にぴったりのスタイルを設定してください。

編集：

この編集は投稿者向けではなく、cssの使用法を学んでいる人向けです。「ベストプラクティス」に基づいて、次のような方法でスタイルを設定するために別の.cssファイルを使用することを検討する必要があります。

.client {
   color: #c0ff33;
}

そしてそれを次のように使用します：

<p><span class="client">Client</span> Testimonial</p>

spanより多くを指定し、内部で自分のスタイルのみを使用することを確認したい場合は、次の<p></p>ように導入することもできます。

p span.client {
   color: #c0ff33;
}

フィドル： http： //jsfiddle.net/LvZt7/97/

スパンではなく、pクラスを指定する他の方法で行うこともできます。

<p class="client"><span>Client</span> Testimonial</p>

と

p.client span {
   color: #c0ff33;
}

または、すべてのp span htmlマーキングを指定して、スパン内に色付きのテキストを含める#c0ff33：

<p><span>Client</span> Testimonial</p>

と

p span {
   color: #c0ff33;
}
于 2012-08-31T15:37:59.707 に答える
0

単語をaでラップして、span代わりにスタイルを設定できます。Henrik Ammerがコメントで述べたように、ありません:first-word。

于 2012-08-31T15:35:23.650 に答える
0

私はこのようなことをすることをお勧めします：

<span class = "redcolor">Client </span> Testimonial

CSS：

.redcolor
{
    color: red
}

そうすれば、赤で何かが必要な場合は、そのクラスでdiv/spanを指定するだけです。

于 2012-08-31T15:51:44.420 に答える