英文:
Pseudoselector :has not work on firefox but works on chrome and Opera
问题
<!--开始代码段：js 隐藏：false 控制台：true Babel：false -->
<!--语言：lang-css -->
.main:has(article:nth-child(n + 2)) .role * {
font-size:55px;
}
<!--语言：lang-html -->
<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 像素
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.main:has(article:nth-child(n + 2)) .role * {
font-size:55px;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Why the CSS not working on firefox ?
The font size will be 55px for all elements except the first
答案1
得分: 1
如今（2023年4月），Firefox默认不支持:has()。
根据MDN的支持表格：
因此，您可以通过设置标志在FF中进行测试，但如果您在FF上有大量用户，您可能希望实施一个解决方法。
这段代码将font-size应用于所有文章，除非只有一篇文章（即文章既是第一个又是最后一个子元素）。
.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>
英文:
As of this moment (April 2023) Firefox does not support :has() by default.
From the support table in MDN:
So you can test it in FF by setting the flag but if you have significant number of users on FF you may want to implement a workaround.
This snippet applies the font-size to all the articles unless there is only one article (i.e. unless the article is both the first and the last child).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/*.main:has(article:nth-child(n + 2)) .role * {
font-size:55px;
}*/
.main article:not(:first-child:last-child) .role * {
font-size: 55px;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
你可以在这里看到，:has() 在 Firefox 上没有支持，几乎所有其他浏览器都支持。
有一些解决办法，比如这个：
https://stackoverflow.com/questions/73936048/how-do-you-enable-has-selector-on-firefox。然而，这是一个兼容性问题，在 Firefox 上不像在其他浏览器中那样有效。
英文:
You can see here that :has() has no support on firefox, it is supported by nearly all the other browsers.
There are some work arounds like this one:
https://stackoverflow.com/questions/73936048/how-do-you-enable-has-selector-on-firefox. However, it is a compatibility issue and it never works as well as in other browsers.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论