問題描述
默認情況下隱藏所有項目的列表，第一個 li 具有 block 的 display.問題是如果第一個元素被刪除，這將不會更新，實際上是創建一個應該顯示的新的第一個子元素.在 Safari 中，不顯示應該顯示的新 li.
With a list of items where all are hidden by default, the first li has a display of block. The problem is that this won't update if the first element is removed, de facto making a new first-child which should be displayed. In Safari the new li that should show is not displayed.
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'));
});
查看小提琴:http://jsfiddle.net/BFTan/1/
在所有其他瀏覽器中單擊該按鈕將循環瀏覽項目，但在 Safari 中沒有任何更新.
In all other browsers clicking the button will cycle through the items but in Safari nothing updates.
推薦答案
這似乎是 display: none 和從文檔樹中刪除的對象的問題，當您使用 :first-child，而不是 Safari 處理 :first-child 選擇器本身的問題.
This appears to be a problem with display: none and objects removed from the document tree which manifests itself when you use :first-child, rather than a problem intrinsic to Safari's handling of the :first-child selector itself.
無論如何，這絕對是一個錯誤.即使您將對象(及其內容)與其父級分離，jQuery 也不會破壞該對象，但是當從其父級分離一個元素時，無論 n 的值如何，它都不應再是其父級的第 n 個子級，因此下一個元素成為第一個孩子的應該相應地匹配 :first-child.
Either way, this is definitely a bug. jQuery doesn't destroy the object even when you detach it (and its contents) from its parent, but when detaching an element from its parent it should no longer be the nth child of its parent for whatever value of n, so the next element that becomes the first child should match :first-child accordingly.
如果您將代碼中的 :first-child 更改為 :not(:last-child)，例如 this，這樣您就有兩個元素同時顯示，當您單擊按鈕時，您會在 Safari 中注意到第一個元素消失，留下第二個元素完好無損(以及仍然隱藏的第三個).
If you change :first-child in your code to :not(:last-child), like this, such that you have two elements displaying at a time, you'll notice in Safari when you click the button the first element disappears, leaving the second element intact (as well as the third which is still hidden).
我還發現，如果您在列表本身上使用 :empty 選擇器添加新的空規則:
I also found that if you add a new empty rule with the :empty selector on the list itself:
/* Or even .list:empty even though it's not actually empty */
.list:not(:empty) {}
一切都會突然在 Safari 中正常工作.更奇怪的是，這種解決方法不適用于任何其他 3 級偽類.它僅適用于 :empty 或 :not(:empty).
Everything will suddenly work correctly in Safari. Even more bizarre is that this workaround does not work with any other level 3 pseudo-class. It only works with :empty or :not(:empty).
這篇關于Safari 錯誤:當使用 JS 刪除項目時，first-child 不更新 display:block的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！