CSS嵌套内伪元素重构：能否优化重复的:not(:hover)选择器？

现有如下SCSS代码，其中多个带不同href属性的a.label选择器都重复写了:not(:hover)伪类，能不能重构一下避免这种重复？

代码示例：

a.label {
  &[href*="/abc"]:not(:hover),
  &[href*="/def"]:not(:hover),
  /* ... */
  &[href*="/xyz"]:not(:hover) {
    color: #f50;
  }
}

当然可以，有两种常用的重构方式：

方式一：使用:is()选择器（现代浏览器推荐） #

利用CSS标准的:is()选择器把多个href属性选择器分组，再统一加上:not(:hover)，能大幅减少重复代码：

a.label {
  &:is([href*="/abc"], [href*="/def"], /* ... */ [href*="/xyz"]):not(:hover) {
    color: #f50;
  }
}

方式二：调整嵌套层级（兼容旧浏览器） #

把:not(:hover)提到外层嵌套，让所有href选择器共享这个伪类，兼容性更好：

a.label:not(:hover) {
  &[href*="/abc"],
  &[href*="/def"],
  /* ... */
  &[href*="/xyz"] {
    color: #f50;
  }
}

两种写法都能实现和原代码完全一致的效果，可根据项目的浏览器兼容需求选择。

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