Safari 错误：当使用 JS 删除项目时，first-child 不更新 display:block答案

【问题标题】：Safari bug :first-child doesn't update display:block when items are removed with JSSafari 错误：当使用 JS 删除项目时，first-child 不更新 display:block
【发布时间】：2013-02-24 10:22:09
【问题描述】：

对于默认隐藏所有项目的列表，第一个li 具有display 的block。问题是，如果第一个元素被删除，这将不会更新，事实上创建了一个应该显示的新的第一个子元素。在 Safari 中，不显示应该显示的新 li。

HTML

<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
</ul>
<button>click me </button>

CSS

.list .item { display: none } 
.list .item:first-child { display:block}

$('button').on('click', function(e) {
  $('ul li:first').remove().appendTo($('ul'));
});

见小提琴：http://jsfiddle.net/BFTan/1/

在所有其他浏览器中单击该按钮将循环浏览项目，但在 Safari 中没有任何更新。

【问题讨论】：

抱歉，“问题”是，这是一个错误吗？
在您的 jQuery 的第 2 行，您有一些冗余代码。 .appendTo($('ul')); 可以更好地写成.appendTo('ul'); 我不认为这会解决它，但它会帮助加载时间。另外，您是否尝试添加 DOM 就绪功能？见这里jsfiddle.net/BFTan/2
那么如果你想看一些非常奇怪的东西。在 JSFiddle 上的 Results iframe 中单击“检查元素”。只需打开控制台就足以让浏览器重新绘制 CSS 规则，然后将 :first-child {display:block} 适当地应用于新的第一个孩子。
@CodyGuldner 在 Safari 中试试你的小提琴。结果相同。
我的建议不会受到伤害；)

标签： javascript css css-selectors safari

【解决方案1】：

这似乎是 display: none 和从文档树中删除的对象的问题，当您使用 :first-child 时会出现这种问题，而不是 Safari 处理 :first-child 选择器本身的问题。

无论如何，这绝对是一个错误。即使您将对象（及其内容）与其父级分离，jQuery 也不会破坏该对象，但是当从其父级分离一个元素时，无论 n 的值如何，它都不应再是其父级的第 n 个子级，因此下一个元素成为第一个孩子的应该相应地匹配:first-child。

如果您将代码中的:first-child 更改为:not(:last-child)，例如this，这样您就会同时显示两个元素，当您单击按钮时，您会在Safari 中注意到第一个元素消失，离开第二个元素完好无损（以及第三个仍然隐藏）。

我还发现，如果您在列表本身上使用 :empty 选择器添加新的空规则：

/* Or even .list:empty even though it's not actually empty */
.list:not(:empty) {}

Safari 中的一切都会突然work correctly。更奇怪的是，这种解决方法不适用于任何其他 3 级伪类。它仅适用于 :empty 或 :not(:empty)。

【讨论】：

会使用detach()，而不是remove()，在这里有所作为吗？