CSS first-child и last-child не работают при использовании этого элемента

Ответ 1

Мне интересно, почему это так, и если есть какое-либо обходное решение для CSS? Мне кажется, что CSS-ошибка для меня - первый элемент может быть и последним элементом.

Это не ошибка. Как работает каскад: если элемент является как первым, так и последним потомком, то если у вас есть :first-child и :last-child в отдельных правилах, и они оба соответствуют одному и тому же элементу, то все, что указано в более позднем объявлении или более конкретном правило будет переопределять другое.

Здесь вы можете найти пример этого , с сокращенным свойством border-radius и обходными решениями, которые включают использование свойств компонента вместо сокращения, а также как указание отдельного правила в целом с использованием одного из следующих селекторов...

Я ищу что-то вроде: селектор "первый ребенок - последний ребенок". Он существует?

Буквально, вы бы связали оба псевдокласса, как это, что прекрасно работает:

:first-child:last-child

Однако существует специальный псевдокласс, который действует одинаково:

:only-child

Основное различие (на самом деле, единственное различие) между этими двумя селекторами является специфичностью: первая более конкретна, так как содержит один дополнительный псевдокласс. Нет никакой разницы даже в поддержке браузера, поскольку :last-child и :only-child поддерживаются одинаковыми версиями каждого браузера.

Ответ 2

Я понимаю, что я очень опаздываю на это, но вы также можете использовать CSS :first-of-type и :last-of-type. Например:

<blockquote>
  <p>Some text you want to quote</p>
</blockquote>

Этот CSS добавит кавычки к абзацу:

blockquote{
  quotes: """ """ "‘" "’";
}

blockquote p:first-of-type:before{
  content:open-quote;
}

blockquote p:last-of-type:after{
  content:close-quote;
}