html – nth-of-type(x)(带有媒体查询)在Safari 9.1.1中无法正

发布时间：2020-12-14 22:36:44 所属栏目：资源来源：网络整理

导读：我有以下代码在Chrome中完美运行但在Safari中无法运行. HTML CSS @media (min-width: 800px) {#info span { display: inline; }#info span:nth-of-type(2) {display: none; }}@media (max-width: 800px) {#info span { display: none; }#info span:nth-of-ty

我有以下代码在Chrome中完美运行但在Safari中无法运行.

HTML


CSS

@media (min-width: 800px) {
#info span { display:  inline; }
#info span:nth-of-type(2) {display: none; }
}

@media (max-width: 800px) {
#info span { display:  none; }
#info span:nth-of-type(2) {display: table-column;}
}

我最初使用nth-child(x)对此进行了编码,但我读到了Safari不支持这一点.我用nth-of-type(x)替换它但它仍然无法正常工作.
如果你从一个’小’列宽开始,然后使它位,它就可以工作.如果再次缩小它,那就是Safari失败的地方.
检查Safari下的页面我可以看到CSS属性display：none;应用但似乎留下了剩余的东西或者……
这是一个jsfiddle与它,在Chrome上工作但在Safari：https://jsfiddle.net/auhbrmzg/2/上没有
只需“缩小”结果列宽度即可查看它的实际效果.
提前感谢您的意见.
干杯.


最佳答案
选择器正在工作.如果您检查Safari内部的元素,您会发现它正在添加样式“display：none”.问题是“display：none”对break标记没有影响.基本上,即使样式设置为“display：none;”,标签仍然存在.
这是你所拥有的替代品：
HTML：


CSS：

@media (min-width: 800px) {
    #info span { display:  inline; }
}

@media (max-width: 800px) {
    #info span {display:block;}
    #info span:nth-child(2) { display:  none; }
}

小提琴：
https://jsfiddle.net/fyqx97zo/9/

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!