Css 更少的多个类和具有相同样式的伪类？

如何用更少的代码简化下面的css

.push-nav > .active > a,
.push-nav > .active > a:hover,
.push-nav > .active > a:focus {
    background:#000;
    color: #fff;
}

我的尝试：

.push-nav > .active > a {
    &:focus,
    &:hover {
        background:#000;
        color: #fff;
    }
}

结果:

.push-nav > .active > a:focus,
.push-nav > .active > a:hover {
  background: #000;
  color: #fff;
}

---

.push nav>.active>缺少一个

---

有什么想法吗？

.push nav>.active>缺少一个

，因为您没有包含它

与符号

&

表示当前选择器

加：

---

在您的代码中

&=.push nav>.active>a

。因此

&:focus=.push nav>.active>a:focus

.push nav>.active>a

丢失，因为您没有包含它

与符号

&

表示当前选择器

加：

---

在您的代码中

&=.push nav>.active>a

。所以

&:focus=.push nav>.active>a:focus

&:focus，&:hover{..}

。重申一下@Harry对你的观点，CSS是无效的，所以如果你没有像hungerstar的解决方案那样重构的具体原因，你的原始代码会做得很好

&，&:focus，&:hover{..}

。重申一下@Harry对您的观点，CSS的有效性较低，因此如果您没有特定的理由像hungerstar的解决方案那样进行重构，那么您的原始代码就可以了

.push-nav > .active > a {
    &,
    &:focus,
    &:hover {
        background: #00;
        color: #fff;
    }
}