使用哪种CSS选择器可避免重复的CSS hover样式代码？

你可以通过以下几种方式简化重复的样式规则：

方案1：选择器分组（兼容性最佳） #

将相同样式的多个选择器用逗号分隔，共享同一段样式声明，适配所有主流浏览器包括老旧IE版本：

#MainPage-OpenMenu:hover path:nth-child(1),
#MainPage-OpenMenu:hover path:nth-child(2) {
  fill: #49ffad;
  transition: 1s;
}

方案2：使用:is()伪类（现代浏览器推荐） #

如果不需要兼容过低版本浏览器，可以用:is()伪类减少父选择器的重复书写：

#MainPage-OpenMenu:hover path:is(:nth-child(1), :nth-child(2)) {
  fill: #49ffad;
  transition: 1s;
}

方案3：匹配前N个子元素的极简写法 #

如果你的需求是匹配前2个path子元素，还可以直接用:nth-child(-n + 2)实现，不需要逐个列出序号：

#MainPage-OpenMenu:hover path:nth-child(-n + 2) {
  fill: #49ffad;
  transition: 1s;
}

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