BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSS :first-letterが機能しない

2023-03-09 19:42:35

質問

Microsoft Word ドキュメントから生成されたいくつかの HTML スニペットに CSS スタイルを適用しようとしています。 Word が生成した HTML はかなり残酷で、多くのインライン スタイルを含んでいます。 それは次のようなものです。 

<html>
    <head></head>
    <body>
        <center>
            <p class=MsoNormal><b style='mso-bidi-font-weight:normal'><span
               style='font-size:12.0pt;line-height:115%;font-family:"Times New Roman"'>Title text goes here<o:p></o:p></span></b></p>

            <p class=MsoNormal style='margin-left:18.0pt;line-height:150%'><span
                style='font-size:12.0pt;line-height:150%;font-family:"Times New Roman"'>Content text goes here.<o:p></o:p></span></p>
    </body>
</html>

...そして非常に単純に、私はタイトルセクションの最初の文字にスタイルを付けたいと思います。 それはちょうどより大きく、異なるフォントである必要があります。 これを行うために、私は :first-letter セレクタを使おうとしているのですが、次のようなものです。 

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

しかし、うまくいっていないようです。 以下は、これを実演するフィドルです。

http://jsfiddle.net/KvGr2/

何が間違っているか/どのようにタイトルセクションの最初の文字が正しくスタイルされるようにするために何かアイデアはありますか？ 私はマークアップにマイナーな変更を加えることができます（物事の周りにラッパーdivを追加するなど）、いくつかの困難がないわけではありませんが。

どのように解決するのですか？

::first-letter では動作しません。 インライン 要素のような span . ::first-letter で動作します。 ブロック 要素、例えば段落、テーブルキャプション、テーブルセル、リストアイテム、またはそれらの display プロパティに inline-block .

したがって ::first-letter を p の代わりに span . 

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

を使いたい場合、あるいは ::first-letter セレクタを span であれば、このように書きます。 

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

MDN 根拠を示す を提供しています。

は ::first-letter CSS 擬似要素は、ブロックの最初の行の最初の文字を選択します。もしその行の前に他のコンテンツ（画像やインラインテーブルなど）がなければ、その行を選択します。

...

最初の行はブロック・コンテナ・ボックスの中でしか意味を持ちませんので ::first-letter を持つ要素にのみ効果があります。 display の値を持つ要素にのみ効果があります。 block , inline-block , table-cell , list-item または table-caption . それ以外の場合は ::first-letter は何の効果も持ちません。

もう一つの奇妙なケース (は、（インライン・アイテムで動作しないこととは別に、）もしあなたが :before を使う場合です。 :first-letter は実際の最初の文字ではなく、その前に適用されます。 コードペン

例

参考文献

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します