:添加/删除内容和兄弟组合器的空伪类问题

Question

我正在尝试将<div>后续的样式设置为空<ul>.

这是我正在测试的简单代码:(操作系统是win7)

基本的jsFiddle DEMO

HTML:

<button class="btnAdd">add new LI</button>
<button class="btnRemove">remove last LI</button>
<ul></ul>
<div>Should be red if UL is empty</div>

CSS:

ul:empty + div {
    color:red;    
}

jQuery :(与问题无关,仅用于测试目的)

$('.btnAdd').on('click', function () {
    $('ul').append('<li>LI</li>');
});

$('.btnRemove').on('click', function () {
    $('ul').find('li').last().remove();
});

预期行为:

在所有主要的浏览器,添加元素时<ul>,空的风格集<ul>以下<div>不宜应用.删除所有时<li>,应将样式重新应用于目标<div>.

目前的行为:

• Firefox处理它没有问题,得到预期的结果.
• 当UL不再为空时,Chrome会删除后续DIV的红色,但当UL再次为空时不会重新应用它(从UL中删除所有LI)
• IE10/11:empty默认只应用CSS 伪类,不对任何添加或删除的内容做出反应

谷歌搜索它,我发现了一些解决方法,但大多数似乎已过时,没有解决问题,至少我找不到.

对于chrome,我发现:empty为UL 设置一个CSS规则修复它,但实际上我不知道发生了什么:(ul:empty {}你这是一个空的CSS规则吗？!)< - 我想现在它强制重新绘制UI在铬？!

固定jsFiddle for chrome

不幸的是,这并不能解决IE10/11上的行为问题.

所以任何人都知道一种方法,使其适用于所有主流浏览器???

更新1:

似乎bug与下一个兄弟选择器有关+,即使使用~不会给chrome提供一致的结果.但是,如果将风格直接:empty元素,一切似乎在所有浏览器正常工作:http://jsfiddle.net/EyEa7/ 但在这里我的目标就是要在目标的同级元素:empty元素,不能直接空元素.

更新2:

强制UI重绘会在所有浏览器上修复它,例如使用$('body').hide().show(0);一次内容已更新:请参阅DEMO强制重绘

但是,我真的更感谢一个不涉及任何JavaScript代码的修复.

现在的问题可能是:

• 我如何强制IE10/11仅使用CSS重新绘制UI？ (希望这是关于这个问题的相关问题)

Answer 1

像这样的东西会起作用,但它并不是特别漂亮:

ul:empty {}

ul:empty + div {
    color: red;
}

ul + div {
    animation: repaint 1000s infinite linear;
}

@keyframes repaint {
    from { zoom: 1; }
    to { zoom: 0.99999; }
}

请参阅:http://jsfiddle.net/vd2Hx/

在Chrome,Firefox,Safari,Opera和IE中测试过.