如何创建在一个元素中需要多个类的CSS选择器？

我有以下几点：

        button {
            background: #eee;
            border: 1px solid #BBB;
            color: #000;

            &:hover:not(.nohover) {
                background: #0007d5;
                border: 1px solid #0007d5;
                color: white;
            }

            &.correct {
                background-color: #00ff00;
                border: 1px solid #00ff00;
            }

            &.incorrect {
                background-color: #ff0000;
            }

            &.current {
                background-color: #000;
                border: 1px solid #000;
                color: white !important;
            }
        }

---

我对如何添加多个附加类感到困惑。如何使按钮的类别为当前且正确，则文本颜色为#00ff00；如果类别为当前且不正确，则文本颜色为#ff0000

您可以使用&selector将类选择器堆叠到同一元素

button {
    &.current {
        background-color: #000;
        border: 1px solid #000;
        color: white !important;
        &.correct {
            // add CSS here for button.current.correct
        }
        &.incorrect {
            // add CSS here for button.current.incorrect
        }
    }
}

或者，如果您不喜欢较深的嵌套：

button {
    &.current.correct {
        // add CSS here for button.current.correct
    }
    &.current.incorrect {
        // add CSS here for button.current.incorrect
    }
}