Псевдоселектор: не работает в Firefox, но работает в Chrome и Opera
.main:has(article:nth-child(n + 2)) .role * {
font-size:55px;
}<div class = "main">
<article><div class = "role"><span>Ruolo1</span> </div> contenuto1 </article>
<article><div class = "role"><span>Ruolo2 </span> </div> contenuto2 </article>
<article><div class = "role"><span>Ruolo3 </span> </div> contenuto3 </article>
<article><div class = "role"><span>Ruolo4 </span> </div> contenuto4 </article>
</div>Почему CSS не работает в Firefox?
Размер шрифта будет 55 пикселей для всех элементов, кроме первого.
Ответы 2
Вы можете увидеть здесь, что :has() не поддерживается в firefox, он поддерживается почти всеми другими браузерами.
Есть некоторые обходные пути, подобные этому:
Как включить селектор :has() в Firefox. Однако это проблема совместимости, и она никогда не работает так хорошо, как в других браузерах.
На данный момент (апрель 2023 г.) Firefox не поддерживает :has() по умолчанию.
Из таблицы поддержки в MDN:
Таким образом, вы можете протестировать его в FF, установив флаг, но если у вас есть значительное количество пользователей в FF, вы можете реализовать обходной путь.
Этот фрагмент применяет размер шрифта ко всем статьям, за исключением случаев, когда существует только одна статья (т. е. если статья не является одновременно и первой, и последней дочерней статьей).
/*.main:has(article:nth-child(n + 2)) .role * {
font-size:55px;
}*/
.main article:not(:first-child:last-child) .role * {
font-size: 55px;
}<div class = "main">
<article>
<div class = "role"><span>Ruolo1</span> </div> contenuto1 </article>
<article>
<div class = "role"><span>Ruolo2 </span> </div> contenuto2 </article>
<article>
<div class = "role"><span>Ruolo3 </span> </div> contenuto3 </article>
<article>
<div class = "role"><span>Ruolo4 </span> </div> contenuto4 </article>
</div>
Потому что
has()не поддерживает в firefox