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

前端之家收集整理的这篇文章主要介绍了css – :空的伪类问题与添加/删除的内容和兄弟组合器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试为< div&gt跟随一个空的< ul&gt ;. 这是我目前测试的简单代码:(操作系统是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处理它没有问题,得到预期的结果。
>当UL不再是空的时候,Chrome会为后续的DIV删除红色,
但当UL再次为空时(从中删除所有LI),不会重新应用它
UL)
> IE10 / 11只是应用CSS:默认情况下为空伪类,不会对添加删除的任何内容做出任何反应

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

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

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? (希望这是有关这个问题的相关问题)

解决方法

这样的事情会奏效,但不是特别漂亮:
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中进行测试。

原文链接:https://www.f2er.com/css/218371.html

猜你在找的CSS相关文章