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>

Обычно я выполняю top-margin в "Header 2", используя css на соседних братьях и сестрах.

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

Тем не менее, h2 имеет запас, определенный через

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

Как я могу заставить соседние братья и сестры работать при переопределении.container h2 css?

Answer 1

.container h2 более конкретно, чем p + h2 так что это принимается во внимание. Вам нужен более конкретный селектор, чтобы переопределить поля.

Это должно быть "более конкретно" и переопределить:

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

Answer 2

Попробуйте следующее:

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

То есть:

• Выбрать h2 элементы...
• ... которые сразу же следуют за p элемент...
• ... который является потомком элемента с классом container,

поскольку .container > p + h2 содержит 1 класс и 2 элемента, он будет переопределять .container h2, который имеет только 1 класс и 1 элемент.

Answer 3

Это должно работать

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