Попытка добавить верхнее поле к соседнему родственнику.

<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>

Обычно я добиваюсь верхнего поля «Заголовка 2», используя CSS для соседних братьев и сестер.

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

Однако маржа h2 определяется через

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

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

1
csi 15 Апр 2014 в 22:21

3 ответа

Лучший ответ

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

Это должно быть «более конкретным» и отменять:

.container p + h2 {
    margin-top: 12px;
}
1
Tricky12 15 Апр 2014 в 18:26

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

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

То есть:

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

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

3
Oriol 15 Апр 2014 в 18:30

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

.container p + h2 {
margin-top: 12px;
}
2
Paulie_D 15 Апр 2014 в 18:24