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

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'));
});

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

score 4 · Accepted Answer

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

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

如果您:first-child将代码更改为:not(:last-child)，像这样，这样您一次显示两个元素，当您单击按钮时，您会在 Safari 中注意到第一个元素消失，而第二个元素保持不变（以及第三个元素）仍然隐藏）。

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

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

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

1 回答 1