css - CSS: クラス内の隣接する兄弟

Question

隣接する兄弟に上マージンを追加しようとしています。

<div class="container">
  <h2>Header 1</h2>
  <p>Some text and sentences...</p>
  <h2>Header 2</h2>
  <p>Some more text and sentences..</p>
</div>

通常、隣接する兄弟でcssを使用して、「ヘッダー2」でトップマージンを達成します。

p + h2{
  margin-top: 12px;
}

ただし、h2 にはマージンが定義されています。

.container h2{
  margin: 24px 0px;
}

.container h2 css をオーバーライドしながら、隣接する兄弟 css を機能させるにはどうすればよいですか?

score 3 · Accepted Answer

次のことを試してください。

.container > p + h2{
  margin: 12px;
}

あれは：

には 1 つのクラスと 2 つの要素が含まれているため、1 つのクラスと 1 つの要素しかない.container > p + h2をオーバーライドします。.container h2

score 2 · Accepted Answer

2

これはうまくいくはずです

.container p + h2 {
margin-top: 12px;
}

于 2014-04-15T18:24:55.877 に答える

score 1 · Accepted Answer

.container h2よりも具体的でp + h2あるため、考慮されます。マージンをオーバーライドするには、より具体的なセレクターが必要です。

これは「より具体的」でオーバーライドする必要があります。

.container p + h2 {
    margin-top: 12px;
}

3 に答える 3