css - CSSを使って小説のように段落を構成する

Question

これはCSSです：

p + p {
 text-indent: 1.1em;
 margin-top: 0;
}
p {
 font-family: 'Crimson Text', serif;
 margin: 0;
}

HTML:

<p>...<p>
<p>...</p> (new paragraph)
<p><br><p>
<p></p> (new scene)

(これは WordPress のデフォルトのテキストエディタです)

私はそれがどのように機能するのかわかりません (覚えていないサイトから取得しました)。それはこれを生成します：

ここに画像の説明を入力

問題は 1 つだけです。3 番目の段落は新しいシーンであり、インデントしないでください。CSSでこれを修正する方法があるのだろうか？(CSS3はOK)

編集：

jQueryが唯一の方法だと思いますか？jQueryでそれを行う提案はありますか?

score 2 · Accepted Answer

私はそれをシーンに構造化すると言います。

マークアップ:

<div class="scene">
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>
<div class="scene">
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

そしていくつかの CSS:

.scene p { text-indent: 1.1em; }
.scene p:first-child { text-indent: 0; }

これにより、マークアップがクリーンアップされ、全面的に一貫性が保たれます。(これは ie7/8 にも対応しています)

score 0 · Accepted Answer

これは、隣接するすべての段落タグがあるためです。HTML を次のように変更した場合:

<p>...<p>
<p>...</p> (new paragraph)
<br>
<p></p> (new scene)

うまくいくはずです-余分なスペースが必要な場合は、ブレークを別のdiv内にラップする必要がありますか?

score 0 · Accepted Answer

<p><br></p>改行のみを含む段落である以外の方法を使用して、シーンの変更をマークする必要があります。以下も人為的ですが、CSS がオフの場合でも空行が発生します。

<p>...</p>
<p>...</p>
<div>&nbsp;</div>
<p>...</p>

ここで、3 番目の要素pの前には要素ではなくp要素があるdivため、セレクターp + pは適用されません。

score 0 · Accepted Answer

@Jukka K. Korpelaに同意します。おそらくもっと良いものを使用する必要があります。私はワードプレスを使ったことがないのですが、マークアップを変更できない場合は、変更した方がよいかもしれません。

今のところ機能する必要がある場合は、このスクリプトを実行すると、css 値が修正されます。

$('br').parent('p').next('p').css('text-indent', '0em');

<br/>最初のシーンの前にタグがあることを確認する必要があります。

<p><br/></p>

4 に答える 4