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

截至目前(2023年4月)，F(xiàn)irefox默認(rèn)不支持:has()。

從MDN的支持表中:

所以你可以在FF中通過設(shè)置標(biāo)志來測(cè)試它，但是如果你在FF上有大量的用戶，你可能想要實(shí)現(xiàn)一個(gè)變通方法。

該代碼片段將字體大小應(yīng)用于所有文章，除非只有一篇文章(即，除非該文章既是第一個(gè)也是最后一個(gè)子元素)。

/*.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上不支持，但幾乎所有其他瀏覽器都支持它。 這里有一些類似的工作: 如何在Firefox上啟用:has()選擇器？然而，這是一個(gè)兼容性問題，它從來沒有在其他瀏覽器中工作得那么好。