WebKit 相邻/通用兄弟选择器错误

在 WebKit 中发现可靠的错误并不常见，在我看来，WebKit 在 CSS 质量支持方面处于领先地位。Alexander Futekov 通过电子邮件让我知道这个错误，我个人从未遇到过。

问题在于将相邻 (+) 或通用 (~) 兄弟选择器与伪类结合使用。 如下所示：

h1 ~ p { color: black; }
h1:hover ~ p { color: red; }

没什么问题，对吧？ 似乎很简单。但在 WebKit 中不起作用，没有任何反应。有很多奇怪的特性可能会影响它并看似修复部分问题。 例如

/* This affects both paragraphs */
h1 ~ p { font: 18px Helvetica, Arial, Sans-Serif; }

/* This works */
h1:hover + p { color: red; }

/* This only affects first
... and does nothing without previous rule */
h1:hover ~ p { color: blue; }

我没有测试每一个，但显然所有伪选择器（:focus、:hover、:checked、:enabled 等）都存在问题。

仅使用 CSS 修复！

Alexander 还提供了一个巧妙的仅使用 CSS 的修复方案。在 body 上使用一个不执行任何操作的动画。

/* Warning: while this works, it may cause high CPU load */
<code class="lang-css prettyprint">body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

针对 WebKit 独有问题的 WebKit 独有修复。 **温馨提示：**读者 Adam Ferguson 和 Simon Goellner 都写信告诉我，此修复程序直接导致他们正在处理的网站出现严重的 CPU 占用。

François Germain 还在 一个测试页面 上提出了一个修复方案。

记录详尽

这当然不是第一个关于此问题的报告。以下是一些错误报告

• bugs.webkit.org/show_bug.cgi?id=12520
• bugs.webkit.org/show_bug.cgi?id=17680
• bugs.webkit.org/show_bug.cgi?id=18026
• bugs.webkit.org/show_bug.cgi?id=18027
• bugs.webkit.org/show_bug.cgi?id=26539
• bugs.webkit.org/show_bug.cgi?id=29029
• bugs.webkit.org/show_bug.cgi?id=32695
• bugs.webkit.org/show_bug.cgi?id=45168

以及其他提及此问题的出版物

• 使用纯 CSS3 显示和隐藏内容，在 照顾老年人 部分
• 基于 CSS3 :target 的界面，在 蜘蛛和爬行动物的问题 部分
• dev.opera.com/forums/topic/600712 – 关于此错误的简短讨论
• 纯 CSS 可折叠树形菜单，在“另一个演示，另一个错误”部分
• 面包屑（和 CSS3 通用兄弟选择器），在“注意事项”部分
• CSS3 – 几乎是个好主意，但对于 Safari 和 Chrome 等所有浏览器来说，其中对 WebKit 浏览器因该错误而受到严厉批评。
• WebKit 错误：悬停和兄弟选择器，一篇关于此错误的文章，其中包含一些潜在的修复方案。
• Safari CSS :hover 和相邻兄弟选择器错误 – 另一篇关于此问题的博文
• Safari 错误报告：带有相邻选择器的悬停不起作用，Quirksmode 对该问题的看法。