javascript - Safari 错误 :first-child doesn't update display:block when items are removed with JS

Question

对于默认隐藏所有元素的列表，第一个 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}

JS

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

参见 fiddle :http://jsfiddle.net/BFTan/1/

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

Answer 1

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

无论哪种方式，这绝对是一个错误。 jQuery 不会销毁该对象，即使您将它(及其内容)从其父对象中分离出来，但是当从其父对象中分离一个元素时，无论 n 的值如何，它都不应再是其父对象的第 n 个子元素，因此下一个元素成为第一个 child 的应该相应地匹配 :first-child。

如果您将代码中的 :first-child 更改为 :not(:last-child)，例如 this ，因此您一次显示两个元素，您会注意到在 Safari 中单击按钮时第一个元素消失，第二个元素完好无损(第三个元素仍然隐藏)。

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

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

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