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

Posted 2023-03-06

【中文标题】如何将 CSS 规则应用于直接相邻的兄弟元素？

【英文标题】：How can I apply CSS rules to directly-adjacent sibling elements?

【发布时间】：2015-04-21 16:45:06

【问题描述】：

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

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

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

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

我对同时兼容 html5、IE 和 Chrome 的解决方案感兴趣。

【参考方案1】：

首先，格式良好的 HTML 中的标签必须是自包含的——<a><b></a></b> 不正确。考虑一下，匹配的hrefs 将指向什么。如果将 B 包含在 A 的元素中，它将共享所有属性：设置其样式的属性和确定链接到何处的属性。您无法将它们分开应该表明这可能是错误的处理方式。规范地说，我们说 HTML 应该代表文档的 结构，而您要在此处更改的是 样式。

如果我们查看some CSS selector reference，我们会发现类似于:hover。 + 和 ~ 看起来应该很有用，但实际上为我们提供了所有之前和之后的元素，这并不是您想要的。

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