问题
I have read in this sitepoint page and quirksmode page about the new :empty pseudoclass.
Sitepoint said that even when there is dynamic content appended, the empty style will still take effect. It is noted that firefox was the one who behaves this way.
Quirksmode said that it discards the empty state when it it filled in with some elements or text. the demo on this site works in my browser (chrome 19). So i assumed only firefox would be buggy.
However I have this piece of code in my plugin, which dynamically fills up a list with items, it doesn't seem to work, here's a fiddle which appends list items, even if you click the button, the items won't appear until you try to debug it in the console (they magically appear when you click the <li> in the element tree).
Why is this happening, and is there a work around to "force-discard" the empty style?
I know there are other ways to do what I am doing in the fiddle (and currently doing one of these "other ways"), but the :empty method is a lot easier.
UPDATE:
added a remove item button. when the last item is removed, the list should disappear - still doesn't work. hmmm.. i'll try to check in another browser.
FIX
Temporary fix/alternative to using :empty and display:none is to have the element have zero width, height, borders, margins, and paddings. additionally, position:absolute to remove it from the flow.
回答1:
The fiddle you provided works for me with FF10 and IE9. It only fails in Chrome (18+)
Not sure why this happens, as the quirksmode page works in Chrome as well..
For the force-discard it seems to be do-able by setting almost any css property with code..
example at http://jsfiddle.net/gaby/YprUV/9/
Update
Ok, i found this Chrome bug report that is about :empty selector misbehaving when used with display:none
It is marked as fixed, but perhaps we should re-oopen it..
Here is a test that does not use display:none (it just changes the background color) and it works just fine.. http://jsfiddle.net/YprUV/11/
来源：https://stackoverflow.com/questions/9443500/empty-pseudoclass-when-adding-dynamic-content