擬似クラス：最初の文字

かなり長い間、私は：first-letter疑似クラスを使用して2つの背景画像を1つの要素に割り当てています。 最も興味深いのは、 first-letterであり、6th Internet Explorerで動作する数少ない擬似クラスの1つです。 ただし、知っておく必要がある小さなトリックが1つあります。



ビジネスに。 上記のように、1つのHTML要素があります。 それを第1レベルの見出しにします。

  <h1>私たちについて</ h1> 

基本的なスタイル、背景色、背景画像（右側の星）を設定します。

  h1 {
ボーダートップ：1pxソリッド＃094eaa;
 border-bottom：1px solid＃094eaa;
背景：＃002261 url（/images/stars.jpg）右中央の繰り返しなし。
 } 

すべてがいつも通りです。 ただし、左にアスタリスクを追加する必要があります。 これは次のように行われます。

  h1：最初の文字{
背景：url（/images/star.jpg）左中央に繰り返しなし;
パディング：7px 0 6px 30px;
 } 

ここで最も重要な点は、疑似クラス自体の間に必ずスペースを入れる必要があることです。最初の文字と開き中括弧。そうしないと、IE6で疑似クラスが機能しません。

  h1：最初の文字{/ *動作しません* /
プロパティ：値;
 }

 h1：最初の文字{/ *これは、中括弧の前にスペースがあるため機能します* /
プロパティ：値;
 } 

もう1つポイントがあります。 複数の要素に同じスタイルを指定する必要があり、そのうちの1つが擬似クラスの最初の文字である場合、要素をリストするときにコンマの前に必ずスペースを挿入する必要があります。 それは：

  h1：最初の文字、.someclass {/ *動作しません* /
プロパティ：値;
 }

 h1：最初の文字、.someclass {/ *カンマの前にスペースがあるため、動作します* /
プロパティ：値;
 } 

それは基本的にそれです。 背景画像の高さがフォントよりも大きく、テキスト自体の下にならないように、パディングが必要です。



オリジナルは私のブログにあります。