0

WordPress によって生成されたページがあり、その HTML は以下の HTML に似ています。my の最初の文字をdiv別のサイズにしたいのですが、 にスタイルを追加しようとするとp:first-letter、すべてpのサイズが変わります。私の問題は、pタグが自動的に作成されるため、タグを削除できないことです。

<div class="div">
    <p>Paragraph 1</p> <!-- I need "P" in "Paragraph" in different size -->
    <p>Paragraph 2</p>
    <blockquote><p>Text blockquote</p></blockquote>
</div>

助言がありますか？

http://jsfiddle.net/hdNDh/

4

3 に答える 3

5

CSS 子セレクター>を使用します。

E > F - 要素 E の子である任意の F 要素に一致します。

jsFiddle

.div > p:first-letter {
    font-size:40px;
}

編集：最初はあなたの質問を誤解していたようです。最初の文字のみが必要な場合は、の代わりににdiv疑似クラスを設定するだけです。divp

jsFiddle

.div:first-letter {
    font-size:40px;
}

Edit2:以下のコメントで述べたように、これを FF で機能させるには、次のものが必要です。

.div > p:first-child:first-letter {
    font-size:40px;
}

jsFiddle

これは奇妙な/奇妙な動作のように見えるので、少し調べてみたところ、Firefox は:first-letter他のブラウザーよりも疑似クラスにこだわっているようです。1 つの例は、特殊文字をlettersとしてカウントしないため、スタイルをそれらに適用しないことです。

少しテストした結果: Firefoxは、最初の子要素の最初の文字を、子要素を含むそれ自体の中で最初に遭遇した文字と同じであるとは見なしません (先行するテキストがない場合でも)が、Chromeはカウントします 最初の子要素の最初の文字は、子要素を含むその要素内で最初に検出された文字と同じになります (先行するテキストがない場合)。

于 2013-09-19T12:48:28.180 に答える