重构嵌套内的 CSS 伪元素

Question

可以在以下 CSS 中重构

:not(:hover)

以避免重复吗？

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

Answer 1

将

:not(:hover)

移至父级完全没问题。

parent-selector {
  & selector1, & selector2 {...}
}

工作原理与

相同

:is(parent-selector) selector1, :is(parent-selector) selector2 {}

在您的情况下，

:is(a.label):not(:hover)[href]

相当于

:is(a.label:not(:hover))[href]

。

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

<a class="label" href="./abc">123 </a>
<a class="label" href="./def">123 </a>
<a class="label" href="./xxx">123 </a>