：空伪类问题添加/删除的内容和兄弟组合器 [英] :empty pseudo class issue with added/removed content and sibling combinators

问题描述

我试图在空白< ul> 之后设置< div> 的样式。

这是我目前正在测试的简单代码：（OS is win7）

基本jsFiddle DEMO

HTML ：

 < button class =btnAdd> add new LI< / button> 
< button class =btnRemove>删除最后一个LI< / button> 
< ul>< / ul> 
< div>如果UL为空，则应为红色< / 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> 。

当前行为：

Chrome 会在下列DIV中删除红色，当UL不再为空时，
，但不会在UL重新为空时重新应用（从
UL中删除所有LI）

• IE10 / 11 只应用CSS ：empty 默认为伪类，不对任何添加或删除的内容作出反应

<我找到一些解决方法，但大多数似乎已过时，没有解决这里的问题，我至少找不到。

对于chrome，我发现设置一个CSS规则：empty 为UL修复它，但真的我不知道发生了什么： ul： / code>（ya这是一个空的CSS规则?!） < - 我猜现在它强迫一个UI重绘在chrome ？ >



修正Chrome的

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

因此任何人都知道一种方法适用于所有主要浏览器？

更新1：

bug与下一个同级选择器 + 相关，即使使用〜也不会在chrome上给出一致的结果。但如果直接应用样式到：empty 元素，似乎在所有浏览器上都正常工作： http://jsfiddle.net/EyEa7/
但是我的目标是定位：empty 元素的兄弟元素，而不是

强制执行UI重绘修正它在所有浏览器，例如使用 $（'body'）。hide（）。show（0）; 一旦内容已更新：请参阅DEMO强制重绘

但是，我真的更喜欢一个修复，

现在的问题可能是：

• 如何强制IE10 / 11只使用CSS重绘UI？（希望这是一个与此问题相关的问题）

解决方案

这样的东西可以工作，但不是特别漂亮：

  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中测试。

I'm trying to set style for a <div> following an empty <ul>.

This is simple code i'm currently testing: (OS is 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: (not relevant to issue, just for testing purpose)

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

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

Expected behaviour:

In all major browsers, when adding element to <ul>, style set for empty <ul> following <div> shouldn't be applied. When removing all <li>, style should be reapplied to targeted <div>.

Current behaviour:

• Firefox handles it with no problem, get expected result.
• Chrome removes red color for following DIV when UL is no more empty, but doesn't reapply it when UL is empty again (removing all LIs from UL)
• IE10/11 just apply CSS :empty pseudo-class as by default, not reacting to any content added or removed

Googling it, i've find some workarounds but most seem outdated and none fix issue here, none i can't find at least.

For chrome, i've found that setting a CSS rule :empty for UL fixes it, but really i don't know what's going on: ul:empty {} (ya this is an empty CSS rule?!) <-- I guess now it forces an UI repaint on chrome ?!

Fixed jsFiddle for chrome

Unfortunatley, this doesn't fix behaviour on IE10/11.

So anyone knows a way to make it works on all major browsers???

UPDATE 1:

Seems like bug is related to next sibling selector +, even using ~ doesn't give consistent result on chrome. But if applying style directly to :empty element, all seems to work correctly on all browsers: http://jsfiddle.net/EyEa7/ But my goal here is to target sibling element of :empty element, not the empty element directly.

UPDATE 2:

Forcing an UI redraw fixes it on all browsers, e.g using $('body').hide().show(0); once content has been updated: See DEMO forcing redraw

But, i'd really more appreciate a fix which doesn't involve any javascript code.

The question now could be:

• How can i force IE10/11 to repaint UI using only CSS? (hoping this is a relevant question regarding this issue)

解决方案

Something like this will work, but it's not particularly pretty:

ul:empty {}

ul:empty + div {
    color: red;
}

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

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

See: http://jsfiddle.net/vd2Hx/

Tested in Chrome, Firefox, Safari, Opera, and IE.

这篇关于：空伪类问题添加/删除的内容和兄弟组合器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！