css - :empty pseudo class issue with added/removed content and sibling combinators

Question

我正在尝试为 <div> 设置样式下面一个空<ul> .

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

Basic 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 可以毫无问题地处理它，得到预期的结果。
• Chrome 当 UL 不再为空时，为跟随的 DIV 移除红色，但当 UL 再次为空时不会重新应用它(从中删除所有 LIUL)
• IE10/11 只需应用 CSS :empty默认伪类，不对添加或删除的任何内容使用react

谷歌搜索，我找到了一些变通办法，但大多数似乎已经过时并且没有解决问题，至少我找不到。

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

Fixed jsFiddle for chrome

不幸的是，这并没有修复 IE10/11 上的行为。

所以有人知道让它在所有主流浏览器上都能工作的方法吗？？？

更新 1:

似乎错误与下一个兄弟选择器有关+ , 即使使用 ~在 chrome 上没有给出一致的结果。但是如果直接将样式应用到 :empty元素，似乎在所有浏览器上都能正常工作:http://jsfiddle.net/EyEa7/但我的目标是针对 :empty 的兄弟元素元素，而不是直接空元素。

更新 2:

强制重绘 UI 可以在所有浏览器上修复它，例如使用 $('body').hide().show(0);内容更新后:See DEMO forcing redraw

但是，我真的更喜欢不涉及任何 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 中测试。