Html 选择多个相邻兄弟姐妹（及其子代）

当我将鼠标悬停在div上时，如何更改它的两个兄弟姐妹的样式

#magic:hover + (#sibling1 > span, #sibling2 > span){color: blue}

更新了此

---

请改为使用上述选项，显然+仅适用于直接同级兄弟姐妹

为什么不使用相邻选择器来实现这一点

#magic:hover + #sibling1 + #sibling2 span {
    color: red;
}

（将第一个元素悬停，然后查看第三个元素的颜色变化）

如果您想更改紧跟着

#magic

的所有元素的样式，请使用

#magic:hover + #sibling1 span,
#magic:hover + #sibling1 + #sibling2 span {
    /* Styles goes here */
}

---

不幸的是，这只会更改第一个同级的样式。这将选择以下同级，您不能单独使用css选择早期同级。另请参见：和

#magic:hover + #sibling1 span,
#magic:hover + #sibling1 + #sibling2 span {
    /* Styles goes here */
}