带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误答案

【问题标题】：Webkit bug with `:hover` and multiple adjacent-sibling selectors带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误
【发布时间】：2012-01-09 08:51:51
【问题描述】：

Safari 和 Chrome，以及 Opera 和 Firefox，可以处理 :hover 伪类和相邻兄弟选择器：

a:hover + div {}

这行得通。

但是，当添加另一个相邻兄弟时：

div:hover + a + div {}

Webkit 崩溃了。

但是，如果您先将鼠标悬停在 <a> 上，然后然后将鼠标悬停在 <div> 上，则样式会按应有的方式应用。

我更困惑，因为如果你添加：

div:hover ~ div {}

无论是否声明了样式，它都会按应有的方式开始工作。

Demo

我在以下位置看到了这个问题：

谷歌浏览器 15.0.874.121
Safari 5.1.1

适用于 OS X。

有什么想法吗？

【问题讨论】：

是的，这是一个 WebKit 错误。我偶尔会遇到它。除了:hovered 和它的父元素之外的元素没有更新。恐怕你无能为力。
有人在这里观察到完全相反的行为：stackoverflow.com/questions/5061509/… 无论哪种方式，这绝对是一个 WebKit 错误，而且显然还没有完全修复。
我在more recent question 上找到了一个更优雅的解决方案，所以我在这里发布了一个类似的答案。
似乎也适用于 :checked 选择器。

标签： css google-chrome safari webkit css-selectors

【解决方案1】：

您可以通过在 body 元素上伪造动画来克服 Webkit 的伪类 + 通用/相邻兄弟选择器错误：

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}

您可以在这里查看：http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

【讨论】：

您甚至没有应用我在那里提供的修复程序，以及您正在使用的注释掉的选择器。这个解决方案解决了他的问题，没有理由投反对票。
这个错误在几乎相似的情况下仍然存在，这个解决方案不起作用
问题中不存在该错误，因此我真的知道您还想从我这里得到多少。或者你所期望的。如果您有任何问题，请将其发布给所有人。选择一个可接受的解决方案来满足您的需求并不是 SO 的目的
谢谢！我在我的文章中使用了这个Advanced Checkbox Hack 结合default checkbox hack 来修复Android 上的WebKit 错误。
@albert 该错误仍然存在于 Webkit 中。不过，您的错误修复可以解决问题（谢谢！）。但是，在身体上不断制作动画是否存在性能问题？

【解决方案2】：

无需动画即可轻松修复

处理了类似的问题here，其中this idea of changed pseudo-classes solved it（注意：nth-child(n) 将始终匹配）：

div:hover + a:nth-child(n) + div

【讨论】：

太棒了。多么晦涩的错误，以及一个简单的（如果是钝的）修复

【解决方案3】：

或者，修复可以仅应用于有更新问题的元素而不是正文元素：

http://jsfiddle.net/ds2yY/12/

.force-repaint { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix {
    from { fill: 0; }
    to { fill: 0; }
}

【讨论】：