伪类加内容css,css – ：空的伪类问题与添加/删除的内容和兄弟组合器

我正在尝试为< div&gt跟随一个空的< ul&gt ;. 这是我目前测试的简单代码:(操作系统是win7)

Basic jsFiddle DEMO

HTML：

add new LI

remove last LI

Should be red if UL is empty

CSS：

ul:empty + div {

color:red;

}

jQuery :(与发行无关，仅用于测试目的)

$('.btnAdd').on('click',function () {

$('ul').append('

LI');

});

$('.btnRemove').on('click',function () {

$('ul').find('li').last().remove();

});

预期行为：

在所有主要的浏览器中，当向< ul>中添加元素时，为空的< ul>以下< div>不应该适用。当删除所有< li>时，样式应该重新应用到目标< div>。

当前行为：

> Firefox处理它没有问题，得到预期的结果。

>当UL不再是空的时候，Chrome会为后续的DIV删除红色，

但当UL再次为空时(从中删除所有LI)，不会重新应用它

UL)

> IE10 / 11只是应用CSS：默认情况下为空伪类，不会对添加或删除的任何内容做出任何反应

搜索它，我找到一些解决方法，但大多数似乎过时，没有修复问题在这里，没有我找不到至少。

对于chrome，我发现设置一个CSS规则：空的UL修复它，但是我真的不知道发生了什么：ul：empty {}(这是一个空的CSS规则？！)

Fixed jsFiddle for chrome

Unfortunatley，这不会修复IE10 / 11的行为。

所以任何人都知道一种方法使其在所有主流浏览器上工作？

更新1：

似乎错误与下一个兄弟选择器有关，即使使用〜也不会给出一致的结果。但是如果直接将样式应用于：空元素，则所有浏览器似乎都能正常工作：http://jsfiddle.net/EyEa7/

但是我的目标是将目标同位素元素：空元素，而不是空元素直接。

更新2：

强制UI重绘会在所有浏览器上修复，例如使用$(‘body’)。hide()。show(0);一旦内容更新：See DEMO forcing redraw

但是，我更希望一个不涉及JavaScript代码的修复。

现在的问题可能是：

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