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

Posted

技术标签:

【中文标题】带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误【英文标题】:Webkit bug with `:hover` and multiple adjacent-sibling selectors 【发布时间】: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 和它的父元素之外的元素没有更新。恐怕你无能为力。 有人在这里观察到完全相反的行为:***.com/questions/5061509/… 无论哪种方式,这绝对是一个 WebKit 错误,而且显然还没有完全修复。 我在more recent question 上找到了一个更优雅的解决方案,所以我在这里发布了一个类似的答案。 似乎也适用于 :checked 选择器。 【参考方案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; 

【讨论】:

以上是关于带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误的主要内容,如果未能解决你的问题,请参考以下文章

包含类、子选择器和相邻兄弟选择器的 CSS 选择器的等效 XPath 是啥?

CSS系列之后代选择器子选择器和相邻兄弟选择器

CSS关联选择器的大致类型总结

如何将 CSS 规则应用于直接相邻的兄弟元素?

css代码中的加号(+)相邻选择器的作用

元素和选择器 伪类 选择器的优先级