Можете ли вы помочь решить проблему с первоочередными и последующими селекторами?

Question

Мне нужно отобразить слово first после первого дочернего элемента каждого раздела:

section:first-child::after {
     content: "first";
}

Answer 1

Потому что вы не установили родителя элемента.Все элементы в CSS наследуются от body.В вашем примере section обрабатывается как:

body section: first-child

Если перед элементом section ничего нет, и он является первым дочерним элементом body, тогда он будет иметь указанные свойства.Остальные свойства будут игнорироваться.

Вы должны обернуть section в контейнер.Например:

<div id="parent">
  <section>...</section>
  <section>...</section>
</div>

И CSS:

.parent section:first-child::after {
  content: "first";
}