:空伪类问题添加/删除的内容和兄弟组合器 [英] :empty pseudo class issue with added/removed content and sibling combinators
问题描述
我试图在空白< ul>
之后设置< div>
的样式。
这是我目前正在测试的简单代码:(OS is win7)
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不再为空时,
- IE10 / 11 只应用CSS
:empty
默认情况下为伪类,不对任何添加或删除的内容作出反应
,但不会在UL重新为空时重新应用(从
UL中删除所有LI)
<我找到一些解决方法,但大多数似乎已过时,没有解决这里的问题,我至少找不到。
对于chrome,我发现设置一个CSS规则:empty
为UL修复它,但真的我不知道发生了什么: ul: / code>(ya这是一个空的CSS规则?!)
Unfortunatley,这不会修复IE10 / 11上的行为。
因此任何人都知道一种方法适用于所有主要浏览器?
更新1:
bug与下一个同级选择器 +
相关,即使使用〜
也不会在chrome上给出一致的结果。但是如果直接应用样式到:empty
元素,似乎在所有浏览器上都正常工作: http://jsfiddle.net/EyEa7/
但是我的目标是将目标sibling元素: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)
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 ?!
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屋!