css - 少覆盖类和子

Question

我对 rect:active 和 rect.myClass 有 Less 语句。我希望 rect.myClass:active 与 rect.myClass 相同。我怎样才能轻松做到这一点？

例如:

rect:active { opacity : 1 }
rect.myClass { opacity : .5 }

现在 rect.myClass:active 也应该有 opacity : .5 除了它不仅仅是一个衬里

Answer 1

如果元素没有 myClass 类，则不要将 :active 样式应用于该元素。

更少的代码

rect {
  &:not(.myClass) {
    &:active {
      opacity: 1;
    }
  }

  &.myClass {
    opacity: .5;
  }
}

编译成CSS

rect:not(.myClass):active {
  opacity: 1;
}
rect.myClass {
  opacity: 0.5;
}