css 伪选择器：在Firefox上不工作，但在Chrome和Opera上工作

o2rvlv0m 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(152)

.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上运行？
除第一个元素外，所有元素的字体大小均为55px

css

来源：https://stackoverflow.com/questions/76002979/pseudoselector-has-not-work-on-firefox-but-works-on-chrome-and-opera

2条答案

按热度按时间

svmlkihl1#

截至目前（2023年4月），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>

赞(0）回复(0）举报 2023-05-30

izkcnapc2#

你可以看到here：has（）在firefox上没有支持，它几乎被所有其他浏览器支持。
有一些类似这样的工作区：How do you enable :has() selector on Firefox。然而，这是一个兼容性问题，它永远不会像在其他浏览器中那样好用。

赞(0）回复(0）举报 2023-05-30