7

現在、「Siteripe」という単語のスタイルを設定しようとしています。文字ごとに違う色にしたいです。このページに示されているように、以下の CSS コード行で最初の文字だけをスタイルできます。

#namer:first-letter {
  color:#09C;
  font-size:1.1em;
  font-weight:bold;
}

単語には 8 文字あるので、残りの 7 文字のスタイルを設定するにはどうすればよいですか? 以下のスタイリングを試しましたが、うまくいきませんでした。スパンを使用して各文字をラップせずに、文字を個別にスタイルする方法はありますか?

   #namer:(1)-letter {
      color:#09C;
      font-size:1.1em;
      font-weight:bold;
    }
4

3 に答える 3

2

CSSはカスケードであることを忘れないでください。#namer要素全体を最初の文字とは別にスタイル設定できます。より具体的なスタイルは、より一般的なスタイルをオーバーライドします。

#namer:first-letter {
    color:#09C;
    font-size:1.1em;
    font-weight:bold;
}

#namer {
    color:red;
}

アップデート：

Lettering.jsを使用すると、個々の文字のスタイルを設定できます。追加情報については、以下のコメントを参照してください。上記の情報は、最初の文字をスタイリングするためのものであり、OPを明確にするために編集される前の、OPの元の質問に対する回答でした。

于 2012-08-11T23:10:48.537 に答える
0

インデックスなしでセレクターを使用してテキスト全体を選択できるはずです

#namer:first-letter {
    color:#09C;
    font-size:1.1em;
    font-weight:bold;
}

#namer {
    color:red!important;
}

次に、上記のインデックス方法を使用して最初の文字を選択できます

于 2012-08-11T23:08:18.950 に答える
-2

疑似要素「first-letter」は自明であり、最初の文字のみを対象としています。残りの文字はそれぞれ異なるスタイルになりますか? そうでない場合は、各文字を span タグで囲み、CSS ルールを割り当てることができます。

これで、残りの文字全体をスタイリングできるようになりました。次に、CSS で:

#namer:first-letter {
color:#09C;
font-size:1.1em;
font-weight:bold;
}

span {
color:red;
.
.
.
}

各文字のスタイルを設定したい場合は、スパンを使用して各文字をラップしてみてください。ただし、視覚的には完全に混乱しているように見える場合があります。注: クラスの名前を考えてください #LOL

于 2012-08-11T23:18:23.833 に答える