CSS :first-letter セレクターが Microsoft Word の HTML で機能しないのはなぜですか?

CSS :first-Letter Selector Not Functioning

Microsoft Word ドキュメントから抽出された HTML コードを扱う場合、スタイルの問題が発生する可能性があります。この場合、Word から生成された HTML に :first-letter セレクターを適用しても、望ましい効果が得られないことがわかります。

課題は、:first-letter セレクターは互換性のみであるという事実にあります。ブロック要素を使用します。提供された HTML では、タイトルの最初の文字がインラインの 内にあります。

解決策 1: :first-letter をブロック要素に適用する

簡単な解決策は、:first-letter セレクターを

に適用することです。 ; の代わりにタイトル テキストを含む要素。

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

解決策 2: ブロックレベルのスパンを使用する

元のマークアップを変更することが不可能な場合、別のアプローチは次のとおりです。 のブロックとして表示プロパティを明示的に指定します。最初の文字を含む要素:

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

説明

:first-letter セレクターは、新しいブロックで始まるコンテナー要素であるブロックレベル要素の最初の文字にのみ影響します。ライン。ブロックレベルの要素の例には、段落、見出し、表のセルなどがあります。

などのインライン要素は、この疑似要素を使用して選択できません。要素をブロックレベルにするには、実質的にブロック要素のように動作するように強制し、:first-letter セレクターを正しく適用できるようにします。

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