咨询：CSS中<dt>悬停时如何影响其后续所有<dd>元素

场景1：单个

对应多个

#

如果你的

里只有一组

和

（比如一个术语对应多个定义），直接用**通用兄弟组合器（~）**就可以搞定，这是CSS2就支持的特性，兼容性拉满：

/* 悬停<dt>时，高亮所有后续的<dd> */
dt:hover ~ dd {
  background-color: #f5f5f5;
  color: #2d3748;
  /* 这里可以换成你需要的任何高亮样式 */
}

这个组合器的作用就是选中当前元素之后所有同层级的指定兄弟元素，不管中间有没有其他元素（不过在

的标准结构里，

后面紧跟的就是

，所以完全适配）。

场景2：多个

分组（多组术语+定义） #

如果你的

里有多个

，每个

对应自己的一组

，上面的方法会导致悬停前面的

时，后面所有

的

也被高亮，这显然不是我们想要的。这时候可以用“先选中再重置”的技巧：

/* 先选中当前<dt>之后的所有<dd>并高亮 */
dt:hover ~ dd {
  background-color: #f5f5f5;
}

/* 重置当前<dt>之后的下一个<dt>及其后续<dd>的样式 */
dt:hover ~ dt ~ dd {
  background-color: transparent;
  color: inherit;
}

原理很简单：第一步先把当前

后面的所有

都高亮，第二步再把“当前

之后的下一个

后面的所有

”样式重置回去，这样就只会高亮当前

对应的那组

了。

如果你想用更现代的CSS写法，也可以用:has()伪类（目前现代浏览器都已支持），代码会更直观：

/* 选中被悬停<dt>所在的分组里的所有<dd> */
dl:has(dt:hover) dd:not(:is(~ dt ~ dd)) {
  background-color: #f5f5f5;
}

小提示 #

• 通用兄弟组合器（~）兼容性极佳，几乎所有浏览器（包括IE7+）都支持，优先推荐这个方案。
• :has()伪类是CSS选择器Level 4的特性，如果你需要兼容旧版浏览器，还是用“先选中再重置”的方法更稳妥。

内容的提问来源于stack exchange，提问作者Loren Maxwell