html - 通过 :active 触发时，IE10 是否识别同级组合器？

Question

当链接为 :active 时，我想将 CSS 应用于兄弟 div

.navigation-menu:active ~ .container-menu,
    left: 0;
}

我知道 IE9 及以下不支持这个，但 IE10 呢？

Answer 1

不，它在 IE10 中不起作用。我用以下小提琴进行了测试：http: //jsfiddle.net/uYsXP/

HTML：

<div>
    <a href="#" class="navigation-menu">Click me</a>
    <div class="container-menu">Bacon!</div>
</div>

CSS：

.navigation-menu:active ~ .container-menu {
    color: green;
}

Answer 2

要将通用同级选择器与伪类一起使用，您会遇到一些错误，但这可以修复。参考这篇文章：

http://css-tricks.com/webkit-sibling-bug/

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

这应该适用于 IE8+

Answer 3

子项的 :active 状态不会从父项向下传播（至少在 IE 10 中）

在这个 SO 答案上发布了一个 JS 解决方法：Make a whole div clickable with working :active css rule in IE10

---

值得注意的是，IE 开发团队已将此问题归类为won't fix

将活动状态传播到祖先元素会显着降低网页的响应能力，因为大量元素可能会受到状态变化的影响。因此，这会使最终用户感觉交互控制迟缓，尤其是在很容易察觉微小延迟的触摸交互中。

来源： https ://connect.microsoft.com/IE/feedback/details/757765/ie10-active-psuedo-class-should-be-triggered-by-child-elements-too