0

最初の段落要素を除くすべての段落要素に 20px のマージントップを設定しようとしています。私はこのコードを持っています:

    <div>
            <h3>Title</h3>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
            <p>Paragraph 3</p>
    </div>

そして、これは私のCSSです：

div p{
    margin-top: 20px;
}
div p:first-child{
    margin-top: 0;
}

しかし、これは機能していません... が原因だと思いますが、修正方法がわかりません...きっと助けてくれると思います! 私の英語を台無しにしてしまったら申し訳ありません。

ありがとう！！！

4

3 に答える 3

4

最初の要素を除く一連の要素のすべての段落要素に 20px の margin-top を設定するには、次を使用します。

p + p { margin-top: 20px; }

pさらに、シーケンスの最初の要素のマージントップをゼロに設定したい場合は、追加するだけです

p { margin-top: 0; }

より具体的なセレクターを持つルールは、シーケンスの最初の要素を除くすべての要素に対してこれをオーバーライドします。

親の最初の子であり、要素の子孫である要素に一致するため、セレクターdiv p:first-childは機能しません。あなたの例では、親の最初の子である要素はありません。pdivp

于 2013-03-06T21:21:49.150 に答える
2

pあなたの例では、最初の子でh3はありません。一緒に行く：

div h3 + p {
    margin-top: 0;
}

デモ： http： //jsfiddle.net/fSZWU/

于 2013-03-06T20:52:19.090 に答える
2

疑似クラス:first-childは、その親の子であるその型の最初の要素を示しません。むしろ、その親の最初の子要素を意味します。

私も最初は戸惑ったのを覚えてい:first-child = firstます。@yabol ( h3 + p) によって提案された解決策は、h3 の次の段落を取得します。これは、あなたの場合、最初の<p>; ただし、ページの構造を変更すると、その特定のスタイルが失われる可能性があるため、注意してください。

探しているものを正確に実現するには、CSS3 疑似クラス:first-of-typeを使用する必要があります。ただし、サポートには注意してください (IE9+ のみ!)

Try it out yourself!

于 2013-03-06T20:58:00.767 に答える