我了解如何使用:hover 选择器，但我想以类似的方式将规则应用于直接相邻的元素。例如，如果我在一个平面列表中有链接 A、B、C 和 D，我希望当我将鼠标悬停在 C 上时应用 B 和 D。
想到的最直观的方法是重叠<a>标签，以便将规则应用于相邻的文本节点，如下所示：
<a>A<a>B</a></a>
如果我将样式应用于第一个锚点，它应该会影响 A 和 B，等等。
我对同时兼容 HTML5、IE 和 Chrome 的解决方案感兴趣。
【问题讨论】：
标签： css html google-chrome internet-explorer
首先，格式良好的 HTML 中的标签必须是自包含的——<a><b></a></b> 不正确。考虑一下，匹配的hrefs 将指向什么。如果将 B 包含在 A 的元素中，它将共享所有属性：设置其样式的属性和确定链接到何处的属性。您无法将它们分开应该表明这可能是错误的处理方式。规范地说，我们说 HTML 应该代表文档的 结构，而您要在此处更改的是 样式。
如果我们查看some CSS selector reference，我们会发现类似于:hover。 + 和 ~ 看起来应该很有用，但实际上为我们提供了所有之前和之后的元素，这并不是您想要的。
我认为最明智的方法是使用 JavaScript。查看this JSFiddle 进行演示。 （我在这里使用jQuery。）
【讨论】：