CSS不在IE / Edge中更新？

Question

以下是JsFiddle

我有一个css规则，具体取决于邻居的显示状态：

#top:not([style*="display: none"]) + #bottom {
  color:red;
}

当我使用javascript隐藏'＃top'div时，由于css规则不再有效，颜色会发生变化。 在Internet Explorer和Edge中不是这种情况！我做错了什么，或者这只是微软浏览器中的一个错误？

Answer 1

我会避免这种方法，如it's somewhat fragile。相反，明确切换父元素或#top上的类，并根据它进行CSS更改：

body.toggled #bottom {
  color:red;
}
body.toggled #top {
  display: none;
}

$("#btn").click(function() {
  $('body').toggleClass('toggled');
});

Demo