为什么这个 CSS 选择器不起作用：a:hover ~ span？

Question

a:hover + span { background:yellow; }
a:hover > span { background:yellow; }
a:hover ~ span { background:yellow; }

前两个选择器工作得很好。但是，第三个选择器不起作用？

演示：http://jsfiddle.net/UAHw7/

为什么？

---

更新：我启动了所有浏览器...

Opera 11 - 作品
Safari 5 - 作品
Firefox 3.6 - 工作
IE9 RC - 作品
Chrome 9 - 不工作

然后是 Chrome 问题...

---

注意：由于 Chrome 不再包含此错误，因此此问题已过时。

Answer 1

解决方案：

Chrome 有一个:hover 问题。尤其是<a>。

1. :hover 在 Chrome 中不起作用：
   <a>Link</a>
2. :hover 在 Chrome 中工作：
   <a href="#">Link</a>
3. :hover 在 Chrome 中工作：
   <a href="javascript:void(0);">Link</a>

注意：您可以使用href="javascript:void(0)" 代替href="#"。我更喜欢javascript:void(0)。

Answer 2

看起来像一个与使用 :hover 伪类有关的 Webkit 错误。

对我来说很好用

• 在 FF 3.6.13 中
• 在所有浏览器的 IE 8 中
• 在 Opera 11 中

这对我不起作用

• 在 Chrome 9 中
• 在 Safari 5.0.3 中

可能具有文件价值。

Answer 3

在我看来，您不能将通用兄弟选择器~ 与伪类:hover 结合起来；请注意，如果您将选择器更改为a ~ span，那么span 的两个元素都会变为黄色。