CSS `:first-letter` セレクターが Span 要素で機能しないのはなぜですか?

CSS :first-letter Not Functioning

Context

Microsoft Word の HTML 出力を使用して生成されたタイトル セクションの最初の文字をスタイルしようとしましたが、 :first-letter セレクターの使用が失敗しました。 HTML には、さまざまなインライン スタイルを持つ span 要素が含まれています。

解決策

この問題は、MDN ドキュメントで定義されているように、:first-letter がブロック レベルの要素でのみ機能するために発生します。この場合、span 要素はインライン要素です。

この問題を解決するには、次の 2 つのオプションがあります。

1. 囲んでいる段落要素に :first-letter を適用します。

p::first-letter {
    font-size: 500px;
}

2. インラインブロックとして表示するspan要素を設定して適用する:first-letter to it.

p b span::first-letter {
    font-size: 500px !important;
}
span {
    display: inline-block;
}

Notes

• :first-letter は、同じ行にある画像やインライン テーブルなどのコンテンツが先行する要素には影響しません。 .
• :first-letter の前に :before を使用すると、最初の要素ではなく :before 要素にスタイルが適用されます。手紙。

以上がCSS `:first-letter` セレクターが Span 要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。