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

Question

我理解如何使用:hover选择器，但我想以与直接相邻元素类似的方式应用规则。例如，如果我在平面列表中有链接A，B，C和D，我希望当我将鼠标移到C上时应用B和D.

最直观的方法是重叠<a>标记，以便将规则应用于相邻的文本节点，如下所示：

<a>A<a>B</a></a>

如果我将样式应用于第一个锚点，它应该同时影响A和B等。

我对HTML5，IE和Chrome兼容的解决方案很感兴趣。

Answer 1

首先，格式良好的HTML中的标记必须是自包含的 - <a><b></a></b>不正确。考虑一下，匹配的href s指向的是什么。如果将B包含在A的元素中，它将共享所有属性：设置其样式的属性和确定其链接位置的属性。你无法将它们分开，这表明这可能是错误的方法。通常，我们说HTML应该代表文档的结构，你想要改变的是样式。

如果我们查看some CSS selector reference，我们会发现与:hover类似的内容。 +和~应该看起来很有用，但事实上它会为我们提供所有之前和之后的元素，这不是您正在寻找的。

我认为最明智的方法是需要JavaScript。查看this JSFiddle进行演示。 （我在这里使用jQuery。）