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

Question

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

HTML

<p id="info">first line
<span> &emsp;|&emsp;</span> 
<span><br></span>
second line
</p>

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/

只需"缩小"结果列宽度即可查看它的实际效果.

提前感谢您的意见.

干杯.

Answer 1

选择器正在工作。如果您检查 Safari 内部的元素，您会发现它添加了“display:none”样式。问题是“display:none”对中断标记没有影响。本质上，即使样式设置为“display:none;”，标签仍然存在。

这是您现有的替代方案：

HTML：

<p id="info">
  <span>first line</span>
  <span> &emsp;|&emsp;</span> 
  <span>second line</span>
</p>

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/